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

vue.js el-table 动态单元格列合并

news 来源：原创 2024/5/10 8:13:02

一、业务需求：

一个展示列表，表格中有一部分列是根据后端接口动态展示，对于不同类型的数据展示效果不一样。如果接口返回数据是’类型1‘的，则正常展示，如果是’类型2‘的数据，则合并当前数据的动态表格。

二、实现思路：

1、先将普通表格实现，不考虑合并效果；

2、在表格上对要合并的单元格类型进行区分；

3、在表格上使用:span-method="arraySpanMethod"方法触发表格；

4、在arraySpanMethod方法内接收数据处理合并，确定从哪一列开始合并到哪一列合并结束；

三、代码展示：

<el-tableref="table"size="mini"height="100%":data="tableData":span-method="arraySpanMethod":header-cell-style="{background: '#f5f7fa',fontWeight: 'bold',color: '#303133'}"border><el-table-columntype="index"header-align="center"align="center"label="序号"width="50"></el-table-column><el-table-columnwidth="120"prop="indexShowName"label="名称"show-overflow-tooltip></el-table-column><el-table-columnwidth="80"prop="type"label="类型种类"show-overflow-tooltip><template slot-scope="scope">{{ scope.row.type === '1' ? '类型1' : '类型2' }}</template></el-table-column><el-table-columnv-for="(item, index) in tableColumns":key="index"width="80":label="item.year"show-overflow-tooltip><template slot-scope="scope"><!-- 类型1展示name --><divv-if="scope.row.type === '1'"style="text-align: center">{{scope.row.uploadValueList[index]?.uploadValueName}}</div><!-- 类型2展示value --><div v-else>{{ scope.row.uploadValueList[index].uploadValue }}</div></template></el-table-column><el-table-columnwidth="160"prop="reportDate"label="上报时间"show-overflow-tooltip></el-table-column><el-table-columnwidth="195"label="操作"header-align="center"align="center"fixed="right"><template slot-scope="scope"><el-buttonsize="small"style="color: #409eff; padding: 0"type="text"@click="detailClick(scope.row)">数据明细</el-button></template></el-table-column></el-table>// --------------methods方法--------------------// 右侧表格initTable() {const params = {pageNum: this.pages.pageIndex,pageSize: this.pages.pageSize,}this.tableLoading = true//api接口调用xxxxxx(params).then((res) => {if (res.code === 200) {const { total } = res.result// const { records, total } = res.result//后端接口数据返回形式如下：const records = [{indexShowName: '测试001',type: '1',reportDate: '2023-12-01 15:53:46',uploadValueList: [{id: '1',year: '2021年',uploadValue: '0',uploadValueName: '完全符合'},{id: '2',year: '2022年',uploadValue: '0',uploadValueName: '完全符合'},{id: '3',year: '2023年',uploadValue: '0',uploadValueName: '完全符合'},{id: '4',year: '2024年',uploadValue: '0',uploadValueName: '完全符合'}]},{indexShowName: '测试002',type: '2',reportDate: '2023-12-01 13:45:53',uploadValueList: [{id: '5',year: '2021年',uploadValue: '99.00'},{id: '6',year: '2022年',uploadValue: '98.00'},{id: '7',year: '2023年',uploadValue: '77.00'},{id: '8',year: '2024年',uploadValue: '34.00'}]}]if (records && records.length > 0) {// 使用第一个元素的 uploadValueList 来创建列this.tableColumns = records[0].uploadValueList.map((item) => ({year: item.year, // 使用 year 作为列的标签id: item.id // 用于做key}))}this.tableData = recordsthis.pages.total = total} else {this.$message.error(res.message)}}).finally(() => {this.tableLoading = false})},// 单元格合并 {当前行row、当前列column、当前行号rowIndex、当前列号columnIndex}arraySpanMethod({ row, column, rowIndex, columnIndex }) {// 类型1,且动态数据长度>1if (row.type === '1' && row?.uploadValueList?.length > 1) {const len = row?.uploadValueList?.length// 合并从下标为0开始的【下标为3的第四列，动态数据长度】if ( columnIndex > 2 && columnIndex <= 2 + Number(len) ) {return {rowspan: 1,colspan: columnIndex === 3 ? len : 0}}}},