vue 基于 element-ui表格的二次封装

由于后台管理系统中常常会用到表格的使用 因此封装了进行了表格的二次封装 有基本的功能 另一些特殊的功能还没有添加
本文用到了slot 如不了解slot 可先了解一下slot 理解起来更容易

• 封装组件

<template>
  <div>
    <!-- 二次封装表格 -->
    <el-table 
      v-loading="loading"
      :data="dataList"
      :height="tabelHeight"
      :border="true"
      highlight-current-row
      :header-row-style="{color:'#000'}"
      :header-cell-style="{background:'#f3f3f3',padding:'0'}"
    >

      <!-- 多选 -->
      <el-table-column
        v-if="showSelection"
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column 
        label="序号"
        type="index"
        width="50"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>

      <!-- 用作有type='selection'的时候 -->
      <slot name="prepend"></slot>  

      <el-table-column 
        v-for="(item, index) in columns"
        :key="index"
        align="center"
        show-overflow-tooltip
        :min-width="item.width"
        :formatter="item.formatter"
        :label="item.label"
        :sortable="item.sortable ? item.sortable : false" //判断是否需要排序功能
      >
        <template slot-scope="scope">
          <slot
            //根据item.render值进行判断 是否需要对props进行另外的操作
            v-if="item.render ? item.render : false" 
            :column="scope.row"
            :name="item.prop"
          ></slot>
          <span v-else>{{scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
	
	  // 单独写了操作 根据条件判断是否需要操作列
      <el-table-column 
        label="操作"
        align="center"
        v-if="showOperation"
        :min-width="handleWidth"
      >
        <template slot-scope="scope">
          <slot :row="scope.row" name="handle"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>


export default {

  props: {
    loading: {
      default: false,
      type: Boolean
    },

    dataList: {
      default: () => [],
      type: Array,
      require: true
    },

    columns: {
      default: [],
      type: Array,
      require: true
    }, 

    handleWidth: {
      type: String,
      default: '10'
    },

    showSelection: {
      default: false,
      type: Boolean
    },

    showOperation: {
      default: false,
      type: Boolean
    },

    number: {
      default: 300,
      type: Number,
    }
  },

  data() {
    return {
      tabelHeight: window.innerHeight - this.number
    }
  },

  mounted() {
    console.log(this.dataList, '11')
    const that = this
    window.onresize = () => {
        return (() => {
            window.fullHeight = window.innerHeight - 300
            that.tabelHeight = window.fullHeight
        })()
    }
  },

  watch: {
    fullHeight(val) {
      if (!this.timer) {
          this.tabelHeight = val
          this.timer = true
          let that = this
          setTimeout(function () {
              that.timer = false
          }, 400)
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>

• column项

export const recommendList = [
  {
    width: '5',
    label: '编号',
    prop: 'id',
  },
  {
    width: '12',
    label: '标题',
    prop: 'store_info_title'
  },
  {
    width: '10',
    label: '区域',
    prop: 'parent_name',
    render: true
  },
  {
    width: '6',
    label: '行业',
    prop: 'p_class_name'
  },
  {
    width: '6',
    label: '面积',
    prop: 'acreage_name'
  },
]

• 使用表格

<template>
  <div>
    <!-- 表格 -->
   <table-propagation
    :dataList="dataList.data"
    :columns="recommendList"
    :showOperation="true"
    :handleWidth="handleWidth"
    :loading="loading"
   >
    <template slot-scope="column" slot="parent_name">
      <el-tag
        v-for="(item,index) in column.column.address_names"
        :key="index"
        size="mini"
      >{{item.parent_name+'|'+item.area_name}}</el-tag>
    </template>

    <template slot-scope="row" slot="handle">
      <el-button type="text" @click="watch(row)">查看</el-button>
    </template> 
   </table-propagation>
  </div>
</template>

<script>

import { recommendList } from '../const'

export default {
  props: {
   current_store: {}
  },

  data(){
    return {
      loading: false,
      dataList: {},
      recommendList: recommendList,
      handleWidth: '5'
    }
  },  

  methods: {
    match() {
      this.loading = true
      this.matchParams.transfer_store_id = this.current_store.id
      //去重
      this.matchParams.admin_display = 1

      matchStoreForRent(this.matchParams)
        .then(res => {
            this.loading = false
            this.total = res.data.datas.total
            this.current_page = res.data.datas.current_page
            this.dataList = res.data.datas
        })
        .catch(err => {
          this.matchLoading = false
          if (this.matchParams.page == 1 && err.response.status == 404) {
            this.data = []
          }
        })
    },
    
   // 使用表格操作列的方法
    watch(params) {
      this.showDialog = true
      this.detailData = params.row
      console.log(params)
    },

  }
}
</script>

<style lang="less" scoped>

</style>

over…