一 效果图
二 封装俩个组件,分别为DynamicTable.vue 跟TableColumn.vue TableColumn.vue 使用递归方法,对表头进行循环生成
DynamicTable.vue
<template> <el-table :data="tableData"> <template v-for="item in tableHeader"> <table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item" ></table-column> <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" ></el-table-column> </template> </el-table> </template> <script> import TableColumn from "./TableColumn"; export default { props: { // 表格的数据 tableData: { type: Array, required: true, }, // 多级表头的数据 tableHeader: { type: Array, required: true, }, }, components: { TableColumn, }, }; </script> <style scoped> </style>
TableColumn.vue
<template> <el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label"> <template v-for="item in coloumnHeader.children"> <tableColumn v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item" ></tableColumn> <el-table-column v-else :key="item.name" :label="item.label" :prop="item.prop" ></el-table-column> </template> </el-table-column> </template> <script> export default { name: "tableColumn", props: { coloumnHeader: { type: Object, required: true, }, }, }; </script> <style scoped> </style>
三 调用组件
<template> <div> <dynamic-table :table-data="tableData" :table-header="tableConfig" ></dynamic-table> </div> </template> <script> import DynamicTable from "@/components/DynamicTable"; export default { components: { DynamicTable, }, data() { return { // 表数据 tableData: [ { date: "2021-09-06", name: "张三", phone: "15739951445", province: "河北省", city: "张家口", address: "河北省张家口市桥西区", }, ], // 表头数据 tableConfig: [ { id: 100, label: "日期", prop: "date", }, { id: 200, label: "配送信息", prop: "", children: [ { id: 210, label: "姓名", prop: "name", }, { id: 220, label: "电话", prop: "phone", }, { id: 200, label: "地址", prop: "", children: [ { id: 210, label: "省份", prop: "province", }, { id: 220, label: "城市", prop: "city", }, { id: 220, label: "详细地址", prop: "address", }, ], }, ], }, ], }; }, }; </script> <style scoped> </style>