当前位置：首页 > news >正文

el-table 实现嵌套表格的思路及完整功能代码

news 来源：原创 2024/9/28 17:47:38

要实现的需求是这样的：
在这里插入图片描述
本来我是用 el-table 的 :span-method 方法实现的，但发现合并起来有问题，跟我的需求差距有些大，于是我想到了嵌套表格。但是嵌套完之后的样子也是很奇怪：

不要气馁，思路还是对的，只要改下样式就好了，于是就有了以下的代码：

<template><el-tableborder:data="tableData"v-loading="loading"class="el-child-table"><el-table-columnprop="applyDate"label="申请日期"align="center"width="120px"></el-table-column><el-table-columnprop="table"label="子表"class-name="has-child":render-header="renderHeader"><template slot-scope="scope"><el-table:data="scope.row.details"class="child-table":show-header="false"><el-table-columnprop="startDate"align="center"label="开始日期"width="120px"></el-table-column><el-table-columnprop="endDate"align="center"label="结束日期"width="120px"></el-table-column><el-table-columnprop="applyDay"align="center"label="申请天数"width="120px"></el-table-column> <el-table-column label="操作" align="center" width="220px"><el-button type="text" @click="viewItem(scope.row)">查看</el-button></el-table-column> </el-table></template></el-table-column></el-table>
</template><script>
export default {data() {return {loading: false,childColumn: [{label: "起始日期",key: 'startDate',width: "120px",},{label: "结束日期",key: 'endDate',width: "120px",},{label: "申请天数",key: 'applyDay',width: "120px",},{label: "操作",width: "220px",}],tableData: [{applyDate: '2016-05-02',details: [{startDate: '2016-05-02',endDate: '2016-05-02',applyDay: 5},{startDate: '2016-05-02',endDate: '2016-05-02',applyDay: 5}]},{applyDate: '2016-05-02',details: [{startDate: '2016-05-02',endDate: '2016-05-02',applyDay: 5},{startDate: '2016-05-02',endDate: '2016-05-02',applyDay: 5}]},{applyDate: '2016-05-02',details: [{startDate: '2016-05-02',endDate: '2016-05-02',applyDay: 5},{startDate: '2016-05-02',endDate: '2016-05-02',applyDay: 5}]}]};},methods: {renderHeader(h, { column, $index }) {const childTable = this.childColumn.map((item) => {return h("div",{style: {width: item.width,padding: "0 10px",textAlign: "center",flexShrink: 0,flexGrow: 0,},},item.label);});return h("div",{style: {display: 'flex'},},childTable);},viewItem(row){}}
}
</script><style scoped lang="scss">
.has-child {padding: 0px !important;// display: none;& > .cell {padding: 0 !important;}::before {height: 0;}.child-table {background-color: transparent;.cell{line-height: 34px;}}.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {background-color: transparent;}.el-table__body tr.current-row > td.el-table__cell,.el-table__body tr.selection-row > td.el-table__cell {background-color: transparent;}tr {background-color: transparent;}.child-head {display: flex!important;}::v-deep .el-table .el-table__cell{padding: 0;}::v-deep .el-table .cell{line-height: 34px;}
}
</style>

总算功夫不负有心人，最终效果还是让我实现了。
在这里插入图片描述