vue.js el-table动态单元格列合并方式
作者：Lemon今天学习了吗
这篇文章主要介绍了vue.js el-table动态单元格列合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、业务需求
一个展示列表，表格中有一部分列是根据后端接口动态展示，对于不同类型的数据展示效果不一样。
如果接口返回数据是’类型1‘的，则正常展示，如果是’类型2‘的数据，则合并当前数据的动态表格。
二、实现思路
1、先将普通表格实现，不考虑合并效果；
2、在表格上对要合并的单元格类型进行区分；
3、 在表格上使用:span-method="arraySpanMethod"方法触发表格；
4、在arraySpanMethod方法内接收数据处理合并，确定从哪一列开始合并到哪一列合并结束；
三、代码展示
<el-table
ref="table"
size="mini"
height="100%"
:data="tableData"
:span-method="arraySpanMethod"
:header-cell-style="{
background: '#f5f7fa',
fontWeight: 'bold',
color: '#303133'
}"
border
>
<el-table-column
type="index"
header-align="center"
align="center"
label="序号"
width="50"
></el-table-column>
<el-table-column
width="120"
prop="indexShowName"
label="名称"
show-overflow-tooltip
></el-table-column>
<el-table-column
width="80"
prop="type"
label="类型种类"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ scope.row.type === '1' ? '类型1' : '类型2' }}
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in tableColumns"
:key="index"
width="80"
:label="item.year"
show-overflow-tooltip
>
<template slot-scope="scope">
<!-- 类型1展示name -->
<div
v-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-column
width="160"
prop="reportDate"
label="上报时间"
show-overflow-tooltip
></el-table-column>
<el-table-column
width="195"
label="操作"
header-align="center"
align="center"
fixed="right"
>
<template slot-scope="scope">
<el-button
size="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接口调用xxx
xxx(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 = records
this.pages.total = total
} else {
this.$message.error(res.message)
}
})
.finally(() => {
this.tableLoading = false
})
},
// 单元格合并 {当前行row、当前列column、当前行号rowIndex、当前列号columnIndex}
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 类型1,且动态数据长度>1
if (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
}
}
}
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。