天津手机版建站系统哪个好_镇江佳鑫网络科技有限公司_冯站长之家_百度推广退款投诉

多级表头表格封装

---

1、表格组件封装

本例子只写到第三层，可自行拓展

<template><div><el-table :data="tableData" border style="width: 100%"><!-- 第一级表头列  --><el-table-columnv-for="column in tableColumns":key="column.label":label="column.label":align="column.align || 'center'":min-width="column.minWidth"show-overflow-tooltip><template v-if="column.children"><!-- 第二级表头列 --><el-table-columnv-for="child in column.children":key="child.label":label="child.label":prop="child.prop":min-width="child.minWidth"><template v-if="child.children"><el-table-columnv-for="subchild in child.children":key="subchild.label":label="subchild.label":prop="subchild.prop":min-width="subchild.minWidth"></el-table-column></template><template v-else><el-table-column :prop="column.prop"></el-table-column></template></el-table-column></template><template v-else><el-table-column :prop="column.prop"></el-table-column></template></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{secondPlayer1: "aaa",thirdPlayer1: "111",thirdPlayer2: "222",},], // 表格数据数组tableColumns: [// 表头配置数组{label: "序号",type: "index",width: "70",},{label: "第一级表头",// prop: 'finstPlayer',minWidth: "",children: [{label: "第二级表头1",prop: "secondPlayer1",minWidth: "",},{label: "第二级表头2",prop: "secondPlayer2",minWidth: "",children: [{label: "第三级级表头1",prop: "thirdPlayer1",minWidth: "",},{label: "第三级级表头2",prop: "thirdPlayer2",minWidth: "",},],},],},],};},created() {},methods: {},
};
</script><style scoped>
/* 表格上方留出间距 */
.el-table {margin-top: 20px;
}
</style>

2、实现效果