elementplus table span-method 根据某一字段值相等 合并

491 阅读1分钟
<el-table  
:data="tableData"  
:span-method="objectSpanMethod"  
highlight-current-row  
@current-change="handleCurrentChange"  
border  
style="width: 100%"  
>
</el-table>
<script setup>
// 先合并  然后直接使用
const spanArr = ref([])  
// 合并单元格  
const getSpanArr = (data) => {  
spanArr.value = []  
let pos = 0  
for (var i = 0; i < data.length; i++) {  
if (i === 0) {  
spanArr.value.push(1)  
pos = 0  
} else {  
// 判断当前元素(controlJobName)与上一个元素是否相同  
if (data[i].controlJobName === data[i - 1].controlJobName && data[i].controlJobName) {  
spanArr.value[pos] += 1  
spanArr.value.push(0)  
} else {  
spanArr.value.push(1)  
pos = i  
}  
}  
}  
// console.log(JSON.parse(JSON.stringify(spanArr.value)), ' this.spanArr')  
}  
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {  
// 获取到哪一列的元素
if (column.property === 'controlJobName') {  
const _row = spanArr.value[rowIndex]  
const _col = _row > 0 ? 1 : 0  
return {  
rowspan: _row, //行  
colspan: _col //列  
}  
}  
}
</script>