ElementUI：通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
以下是合并行：
template:
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column prop="date" align="center" label="时间日期" width="120"></el-table-column>
<el-table-column prop="time" label="单位" width="120"></el-table-column>
<el-table-column prop="unit" label=""></el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1（元）">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2（元）">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3（元）">
</el-table-column>
</el-table>
js：
data() {
return {
spanArr: [],
pos: 0
}
},
watch: {
tableData: {
handler () {
this.getSpanArr(this.tableData)
},
immediate: true
}
},
methods: {
// 根据条件合并随意行数，因为合并的行数可能是不固定的（传入的data参数为从后台数据数据）
getSpanArr(data) {
this.spanArr = []
this.pos = 0
for (var i = 0; i < data.length; i++) {
if (i === 0) {
// 如果是第一条记录（即索引是0的时候），向数组中加入１
this.spanArr.push(1)
this.pos = 0
} else {
if (data[i].name=== data[i - 1].name) {
// 如果name相等就累加，并且push 0 （这里的判断视自己的判定依据改变,name就是要对比的字段）
this.spanArr[this.pos] += 1
this.spanArr.push(0)
} else {
// 不相等push 1
this.spanArr.push(1)
this.pos = i
}
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 用于设置要合并的列 0 表示第一列
if (columnIndex === 0) {
const cRow = this.spanArr[rowIndex]
const cCol = cRow > 0 ? 1 : 0
return {
rowspan: cRow, // 合并的行数
colspan: cCol // 合并的列数，为0表示不显示
}
}
}
}
原文链接：https://blog.csdn.net/qq_38157825/article/details/119211247
网友评论