el-table实现表格组件化

在UI框架中，表格通过:data来给行数据赋值，生成多行数据，一般列是固定的，不能改变。

想要实现动态改变列，可以通过循环。

实现效果：

 

实现代码：

1.子组件：

<template>
  <div class="contrainer">
    <el-table :data="tableData" style="width: 100%">
      <template>
        <el-table-column
          v-for="item in tableColData"
          :prop="item.id"
          :label="item.name"
          :key="item.id"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
 
<script>
export default {
  props: ["tableData", "tableColData"],
  data() {
    return {};
  },
};
</script>

2.父组件：

<template>
  <div class="tables">
    <Table :tableData="tableData" :tableColData="tableColData"></Table>
  </div>
</template>

<script>
import Table from "@/components/basicComponents/table/Table";

export default {
  components: {
    Table,
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎2",
          telephone: "123",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎2",
          telephone: "123",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎2",
          telephone: "123",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎2",
          telephone: "123",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      tableColData: [
        {
          id: "date",
          name: "日期",
        },
        {
          id: "name",
          name: "姓名",
        },
        {
          id: "telephone",
          name: "电话",
        },
        {
          id: "address",
          name: "地址",
        },
      ],
    };
  },
};
</script>

实现原理：

1.通过在父组件中引入子组件，并且传入对应的行数据及列数据，即可动态改变子组件中表格的数据内容。

 

思考：

1.现在实现的是表格可以通过参数传递显示对应的行列数据，但是只有一种样式，即默认样式。若是表格中列的展示形式不同，且表格中是否带有编辑列也不确定，这种情况下表格组件又该怎么实现？