方法一:
<el-table
width="100%"
height="100%"
:data="dataList"
:span-method="(param) => objectSpanMethod(param, 5)"
stripe>
<el-table-column
prop="name"
label="名称">
</el-table-column>
......
</el-table>
objectSpanMethod({ row, column, rowIndex, columnIndex }, item) {
if (columnIndex === 0) {
if (rowIndex % item === 0) {
return {
rowspan: item,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
方法二:
https://blog.csdn.net/u013675978/article/details/107067343/
<el-table
width="100%"
height="100%"
:data="dataList"
:span-method="objectSpanMethod"
stripe>
<el-table-column
prop="name"
label="名称">
</el-table-column>
......
</el-table>
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (row.rowspan != 1) {
return {
rowspan: row.rowspan,
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
},
getData().then(res => {
this.dataList= res.data.list || [];
//处理数据
for (let i = this.dataList.length - 1; i > 0; i--) {
//从后向前遍历
if (!this.dataList[i].rowspan) {
//设置初始值(可理解为:每个数据项必定占一行)
this.dataList[i].rowspan = 1;
}
if (this.dataList[i].name== this.dataList[i - 1].name) {
//当前名称与前一个数据的名称相同时 设置rowspan(前数据一项与下一行的相同时 合并一行)
this.dataList[i - 1].rowspan =
this.dataList[i].rowspan + 1;
this.dataList[i].rowspan = 1;
}
}
})