el-table表格处理同列相同数据进行合并
html
el-table中使用 -->:span-method="objectSpanMethod"方法
<el-table
ref="tableRef"
:data="tableData"
tooltip-effect="dark"
:span-method="objectSpanMethod"
style="width: 100%; margin-top: 16px"
>
<el-table-column align="center" prop="data" label="执行日期">
</el-table-column>
<el-table-column align="center" prop="time" label="执行时间">
</el-table-column>
<el-table-column align="center" prop="taskName" label="任务名称">
</el-table-column>
<el-table-column
align="center"
prop="progressStatus"
label="任务进度状态"
>
</el-table-column>
<el-table-column
align="center"
prop="resultStatue"
label="任务结果状态"
>
</el-table-column>
<el-table-column align="center" label="操作" width="450">
<template slot-scope="scope">
<div class="table-btns">
<div class="btn-red cursor-pointer">暂停</div>
<div class="btn-red cursor-pointer">终止</div>
</div>
</template>
</el-table-column>
</el-table>
data数据
//表格数据
tableData: [
{
data: "2022-01-07",
time: "15:56:08",
taskName: "任务20210903",
progressStatus: "0",
resultStatue: "0",
},
{
data: "2022-01-07",
time: "15:56:08",
taskName: "任务20210903",
progressStatus: "1",
resultStatue: "1",
},
{
data: "2022-01-07",
time: "15:56:08",
taskName: "任务20210903",
progressStatus: "2",
resultStatue: "1",
},
{
data: "2022-01-08",
time: "15:56:08",
taskName: "任务20210903",
progressStatus: "3",
resultStatue: "0",
},
{
data: "2022-01-09",
time: "15:56:08",
taskName: "任务20210903",
progressStatus: "4",
resultStatue: "1",
},
{
data: "2022-01-09",
time: "15:56:08",
taskName: "任务20210903",
progressStatus: "5",
resultStatue: "1",
},
],
methods内部处理
/**表格合并单元格 */
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 判断哪一列 如果需要处理多了 使用 || 进行处理即可
if (columnIndex === 0) {
const _row = this.flitterData(this.tableData).one[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
/**合并表格的第一列，处理表格数据 */
flitterData(arr) {
let spanOneArr = [];
let concatOne = 0;
arr.forEach((item, index) => {
console.log(item, index);
if (index === 0) {
spanOneArr.push(1);
} else {
//注意这里的data是表格绑定的字段，根据自己的需求来改
if (item.data === arr[index - 1].data) {
//第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
} else {
spanOneArr.push(1);
concatOne = index;
}
}
});
return {
one: spanOneArr,
};
},
