封装简单的table组件

步骤：

1、封装一个table组件（子）

• 子用prop接收传过来的数据 ：表头数据、表体数据等
• 
• 若子需要向父传递事件则用$emit

2、使用table的组件（父）

• 在子标签上绑定传过去的数据
• 

3、配置表头数据（个人习惯觉得代码更清晰）

• 将表头数据独自创建的js中
• 

封装的table组件（子）

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="150" />
      <template v-for="item in tableOptions" :key="item.label">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template #="scope">
            <slot v-if="item.slot" :scope="scope" />
            <!-- <span v-else>{
   
   { scope.row[item.prop] }}</span> -->
            <span v-else>{
   
   { getData(item, scope) }}</span>
          </template>
        </el-table-column>
      </template>

      <el-table-column fixed="right" label="Operations" width="120">
        <template #default>
          <el-button link type="primary" size="small">Detail</el-button>
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    tableOptions: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    // 版本一
    const getData = (item, scope) => {
      return item.map
        ? item.map[scope.row[item.prop]] || item.map["_"]
        : scope.row[item.prop];
    };
    return {
      getData,
      props,
    };
  },
};
</script>

<style lang="less" scoped></style>

使用table的组件（父）：

<template>
  <div>
    <Table :tableData="tableData" :tableOptions="tableOptions"></Table>
  </div>
</template>

<script>
import Table from "./GoodsMain.vue";
import tableOptions from "./tableOptions";
export default {
  components: {
    Table,
  },
  setup() {
    const tableData = [
      {
        date: "2016-05-03",
        name: "Tom",
        state: "California",
        city: "Los Angeles",
        address: "No. 189, Grove St, Los Angeles",
        zip: "CA 90036",
        tag: "Home",
        sex: 1,
      },
      {
        date: "2016-05-02",
        name: "Tom",
        state: "California",
        city: "Los Angeles",
        address: "No. 189, Grove St, Los Angeles",
        zip: "CA 90036",
        tag: "Office",
        sex: 0,
      },
      {
        date: "2016-05-04",
        name: "Tom",
        state: "California",
        city: "Los Angeles",
        address: "No. 189, Grove St, Los Angeles",
        zip: "CA 90036",
        tag: "Home",
        sex: 1,
      },
      {
        date: "2016-05-01",
        name: "Tom",
        state: "California",
        city: "Los Angeles",
        address: "No. 189, Grove St, Los Angeles",
        zip: "CA 90036",
        tag: "Office",
        sex: 1,
      },
    ];
    return {
      tableData,
      tableOptions,
    };
  },
};
</script>

<style lang="less" scoped></style>

定义好的表头数据:

export default [
  {
    prop: "date",
    label: "时间",
    width: "150",
  },
  {
    prop: "name",
    label: "名字",
    width: "120",
  },
  {
    prop: "sex",
    label: "性别",
    width: "120",
    map: { 0: "女", 1: "男" },
  },
  {
    prop: "state",
    label: "状态",
    width: "120",
  },
  {
    prop: "city",
    label: "城市",
    width: "120",
  },
  {
    prop: "address",
    label: "地址",
    width: "500",
  },
  {
    prop: "zip",
    label: "压缩包",
    width: "120",
  },
];

效果图：