表格基础封装

前言

本来很早就该发这篇文章了，一直拖到了现在才开始动笔。此文章为系列文章，都是个人对element组件进行二次开发过的一些组件。element本身是非常优秀的组件库，其颗粒度非常小，或者说非常的基础，我们在实际开发过程中往往需要对其进行二次封装或者更多次封装来满足业务场景。

封装思路

element提供的表格组件表头需要我们一个一个的去添加，多一列就需要我们手动去添加一列的表头，如果每一列都需要同样的特殊处理，比如双击可编辑的话，工作量还是很大的。这里我们的封装思路就是使用v-for来渲染表头，这样我们就可以直接在表头数据里进行修改，也方便我们对所有表头数据进行统一处理。表头数据中添加属性自定义属性slot，用来展示需要特殊样式的。

代码实现

组件封装部分

<template>
  <div>
    <el-table :data="table" style="width: 100%">
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        v-for="(item, index) in head"
        :key="item.prop + index"
      >
        <template slot-scope="{ row, $index }">
          <slot v-if="item.slot" :name="item.slot" :data="row" :index="$index">
            {{ row[item.prop] }}
          </slot>
          <span v-else>
            {{ row[item.prop] === undefined ? "-" : row[item.prop] }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    head: {
      type: Array,
      require: true,
      default: () => []
    },
    table: {
      type: Array,
      require: true,
      default: () => []
    }
  }
};
</script>

使用示例

<template>
  <base-table :head="tableHead" :table="tableData">
    <template #show="{data}">
      <el-switch
        v-model="data.show"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
    </template>
  </base-table>
</template>

<script>
import baseTable from "@/components/table/base";
export default {
  components: {
    baseTable
  },
  data() {
    return {
      // 表头数据
      tableHead: [
        {
          label: "日期",
          prop: "date"
        },
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "地址",
          prop: "address"
        },
        {
          label: "是否显示",
          prop: "show",
          slot: "show"
        }
      ],
      // 表格数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          show: true
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          show: false
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          show: true
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          show: true
        }
      ]
    };
  }
};
</script>