el-table合并行 根据id合并行,span-method的使用
文章类型:Vue
发布者:hp
发布时间:2024-11-08
有些时候,在查看表格的时候,相同的行需要进行合并,才能更好直观的看到数据情况
采用element-ui表格组件的方法,:span-method主要是进行行或者列的合并
:span-method="objectSpanMethod"
const objectSpanMethod = ({ row, column, rowIndex, columnIndex })=> {
//根据列的index 制定index为...的列合并
if (columnIndex === 0) { // 指定合并第二列
if (rowIndex !== 0 && tableData.value[rowIndex - 1].ordreNo === tableData.value[rowIndex].ordreNo) { // 第二列中的数据字段DYFX 只要重复 就合并行 qiBaseList 是表格数据数组
return { rowspan: 0, colspan: 1 }
} else {
let count = 1
for (var i = rowIndex + 1; i < tableData.value.length; i++) {
if (tableData.value[i].ordreNo === tableData.value[rowIndex].ordreNo) {
count++
} else {
break
}
}
return { rowspan: count, colspan: 1 }
}
}
}