element-ui表格组件的封装（1）

背景#

我们平常工作中需要用表格的形式来展示多行数据

需求#

需求1：通过配置文件的形式来设置表格的列

需求2：可以合并表头

代码#

MyTable.vue

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      :height="height"
      border
    >
      <el-table-column
        v-for="(column, index) in columns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :fixed="column.fixed"
        :sortable="column.sortable"
        :show-overflow-tooltip="true"
        align="center"
      >
        <!--  // 下面不可行
          <template slot-scope="scope" v-if="column.children">
            <slot :name="column.slotName" :row="scope.row">
              {{ scope.row[column.prop] }}
            </slot>
          </template>
          <template v-else>
            <el-table-column
              v-for="(column2, index2) in column.children"
              :key="column2 + ' ' + index2"
              :prop="column2.prop"
              :label="column2.label"
            ></el-table-column>
          </template>
         -->
        <!-- 
            如果没有表头合并的话，下面的el-table-column是不会遍历的；下面的插槽则会采用默认的内容，或者由外面自定义；
            如果有表头合并的话，则会执行下面的el-table-column；
         -->
        <template slot-scope="scope">
          <slot :name="column.slotName" :row="scope.row">
            {{ scope.row[column.prop] }}
          </slot>
        </template>
        <el-table-column
          v-for="(column2, index2) in column.children"
          :key="column2 + ' ' + index2"
          :prop="column2.prop"
          :label="column2.label"
          :width="column.width"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      },
    },
    // 存在的列
    columns: {
      type: Array,
      required: true,
    },
    height: {
      type: String,
    },
    showIndexColumn: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style scoped></style>

table.config.js

const tableConfig = {
  // 设置列
  columns: [
    {
      prop: 'date',
      label: '日期',
      width: '280',
      // 设置固定列
      fixed: true,
      // 设置排序
      sortable: true,
    },
    {
      prop: '',
      label: '配送信息',
      children: [
        {
          prop: 'name',
          label: '姓名',
          width: '180',
        },
        {
          prop: 'province',
          label: '省份',
          width: '180',
        },
        {
          prop: 'city',
          label: '市区',
          width: '200',
        },
        {
          prop: 'address',
          label: '地址',
          width: '200',
        },
        {
          prop: 'zip',
          label: '邮编',
        },
      ],
    },
    {
      prop: '',
      label: '操作',
      //  作用域插槽
      slotName: 'operator',
    },
  ],
  // 设置固定表头
  height: '250',
}

export default tableConfig

Test.vue

<template>
  <div>
    <my-table v-bind="tableConfig" :tableData="tableData">
      <template #operator="scope">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-edit"
          circle
          @click="handleEditClick(scope.row)"
        ></el-button>
        <el-button
          type="danger"
          size="mini"
          icon="el-icon-delete"
          circle
          @click="handleDelClick(scope.row)"
        ></el-button>
      </template>
    </my-table>
  </div>
</template>

<script>
import MyTable from '@/components/table'

import tableConfig from './table.config'

export default {
  data() {
    return {
      tableConfig,
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
        },
      ],
    }
  },
  components: {
    MyTable,
  },
  methods: {
    handleEditClick(data) {
      console.log('edit', data)
    },
    handleDelClick(data) {
      console.log('del', data)
    },
  },
}
</script>

<style scoped></style>

最终效果#