广州新塘网站建设,广州市官网网站建设平台,网站系统修改,网站建设平台计划书一、业务需求#xff1a;
一个展示列表#xff0c;表格中有一部分列是根据后端接口动态展示#xff0c;对于不同类型的数据展示效果不一样。如果接口返回数据是’类型1‘的#xff0c;则正常展示#xff0c;如果是’类型2‘的数据#xff0c;则合并当前数据的动态表格。…一、业务需求
一个展示列表表格中有一部分列是根据后端接口动态展示对于不同类型的数据展示效果不一样。如果接口返回数据是’类型1‘的则正常展示如果是’类型2‘的数据则合并当前数据的动态表格。
二、实现思路
1、先将普通表格实现不考虑合并效果
2、在表格上对要合并的单元格类型进行区分
3、 在表格上使用:span-methodarraySpanMethod方法触发表格
4、在arraySpanMethod方法内接收数据处理合并确定从哪一列开始合并到哪一列合并结束
三、代码展示
el-tablereftablesizeminiheight100%:datatableData:span-methodarraySpanMethod:header-cell-style{background: #f5f7fa,fontWeight: bold,color: #303133}borderel-table-columntypeindexheader-aligncenteraligncenterlabel序号width50/el-table-columnel-table-columnwidth120propindexShowNamelabel名称show-overflow-tooltip/el-table-columnel-table-columnwidth80proptypelabel类型种类show-overflow-tooltiptemplate slot-scopescope{{ scope.row.type 1 ? 类型1 : 类型2 }}/template/el-table-columnel-table-columnv-for(item, index) in tableColumns:keyindexwidth80:labelitem.yearshow-overflow-tooltiptemplate slot-scopescope!-- 类型1展示name --divv-ifscope.row.type 1styletext-align: center{{scope.row.uploadValueList[index]?.uploadValueName}}/div!-- 类型2展示value --div v-else{{ scope.row.uploadValueList[index].uploadValue }}/div/template/el-table-columnel-table-columnwidth160propreportDatelabel上报时间show-overflow-tooltip/el-table-columnel-table-columnwidth195label操作header-aligncenteraligncenterfixedrighttemplate slot-scopescopeel-buttonsizesmallstylecolor: #409eff; padding: 0typetextclickdetailClick(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}}}},
