Vue2+ElementUI实现动态表格

前言介绍

index.vue 引用动态表头组件
Table.vue 动态表格组件
TableColumn.vue 动态表格表头组件，此组件是主要递归组件

TableColumn.vue

<template>
  <el-table-column v-bind="columnHeader" :align="columnHeader.align" :width="columnHeader.width">
    <template slot-scope="scope">
      <slot v-bind="scope" :data="columnHeader" :prop="columnHeader.prop">
        {{ scope.row[columnHeader.prop] }}
      </slot>
    </template>
    <template v-if="columnHeader.children && columnHeader.children.length &&
    columnHeader.children.length != 0">
      <template v-for="item in columnHeader.children">
        <TableColumn :key="item.prop" :columnHeader="item">
          <template slot-scope="scope">
            <slot v-bind="scope"></slot>
          </template>
        </TableColumn>
      </template>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: "TableColumn",
  props: {
    columnHeader: {
      type: Object,
      default: Object,
    },
  },
};
</script>

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

2.Table.vue

<template>
  <el-table :data="tableData">
    <TableColumn v-for="column in columnHeaders" :columnHeader="column" :key="column.prop">
      <template slot-scope="scope">
        <slot v-bind="scope" :name="scope.prop"/>
      </template>
    </TableColumn>
  </el-table>
</template>

<script>
import TableColumn from "./TableColumn";
export default {
  name: "Table",
  props: {
    columnHeaders: {
      type: Array,
      default: Array,
      require:true
    },
    tableData: {
      type: Array,
      default: Array,
    },
  },
  components: {
    TableColumn,
  },
};
</script>
<style scoped>

</style>

3.index.vue

<template>
  <div>
    <Table :tableData='tableData' :columnHeaders="columnHeaders"/>
  </div>
</template>

<script>
import Table from './Table'
export default {
  components:{Table},
  data(){
    return{
      tableData:[ // 表格数据
        {
          name: '王小虎', IDCard:"420122200201230215",
          StudentID:'202311415125',province1:"湖北省",
          city1:"武汉市", county1:"洪山区",cun1:"张家湾街道",
          province2:"湖北省", city2:"十堰市", county2:"郧西县",cun2:"城关"
        }, {
          name: '王小虎', IDCard:"420122200201230215",
          StudentID:'202311415125',province1:"湖北省",
          city1:"武汉市", county1:"洪山区",cun1:"张家湾街道",
          province2:"湖北省", city2:"武汉市", county2:"洪山区",cun2:"狮子山街道"
        }, {
          name: '王小虎', IDCard:"420122200201230215",
          StudentID:'202311415125',province1:"湖北省",
          city1:"武汉市", county1:"洪山区",cun1:"狮子山街道",
          province2:"湖北省", city2:"武汉市", county2:"洪山区",cun2:"张家湾街道"
        }
      ],
      columnHeaders:[ // 表头数据
        {
          label:"姓名", // 表头表格名称
          prop:"name", // key，与tableData中的key对应
          width:'100', // 宽度
          align:"center", // 位置 center居中 left居左 right居右
          children:[] // 子项
        },{
          label:"ID",
          prop:"ID",
          align:"center",
          children:[
            {
              label:"学生证",
              prop:"StudentID",
              align:"center",
              width:'150',
              children:[]
            },{
              label:"身份证",
              prop:"IDCard",
              align:"right",
              width:'180',
              children:[]
            }
          ]
        },{
          label:"家庭住址",
          prop:"address",
          children:[
            {
              label:"户籍住址",
              prop:"address1",
              children:[
                {
                  label: "省",
                  prop:"province1",
                },{
                  label: "市",
                  prop:"city1",
                },{
                  label: "县",
                  prop:"county1",
                },{
                  label: "村",
                  prop:"cun1",
                  width:'180',
                },{
                  label: "组/楼栋",
                  prop:"zu1",
                }
              ]
            },{
              label:"现住址",
              prop:"address2",
              children:[
                {
                  label: "省",
                  prop:"province2",
                },{
                  label: "市",
                  prop:"city2",
                },{
                  label: "县",
                  prop:"county2",
                },{
                  label: "村",
                  prop:"cun2",
                  width:'180',
                },{
                  label: "组/楼栋",
                  prop:"zu2"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>
<style scoped>

</style>