Vue+Element-ui<根据相同字段合并表格>
2020-08-13 本文已影响0人
誰在花里胡哨
效果图:
image.png代码如下:
<template>
<div class="app-content">
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="姓名" />
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: "1",
name: "王小虎"
},
{
id: "1",
name: "王小虎"
},
{
id: "1",
name: "王小虎"
},
{
id: "2"
},
{
id: "3",
name: "王小虎"
},
{
id: "3",
name: "王小虎"
},
{
id: "3",
name: "王小虎"
},
{
id: "3",
name: "王小虎"
},
{
id: "5",
name: "王小虎"
},
{
id: "5",
name: "王小虎"
}
]
};
},
created() {
this.setrowspans();
},
methods: {
/*
这个方法是
控制单元格的
返回值是一个对象
例如:返回
return {
rowspan: 2,
colspan: 1
}
是把当前的一个单元格和正下方的单元格合并
且
下一个单元格要返回
return {
rowspan: 0,
colspan: 0
}
这是API给的
我发现
返回
return {
rowspan: 0,
colspan: 1
}
也是可以的
那合并单元格就十分容易了
前提是数据已经根据id进行排序
假如id为3的有四个数据
只需要返回
[4,1]
[0,1]
[0,1]
[0,1]
即可
用下面的setrowspans方法进行处理即可
*/
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
return {
rowspan: row.rowspan,
colspan: 1
};
}
},
setrowspans() {
// 先给所有的数据都加一个v.rowspan = 1
this.tableData.forEach(v => {
v.rowspan = 1;
});
// 双层循环
for (let i = 0; i < this.tableData.length; i++) {
// 内层循环,上面已经给所有的行都加了v.rowspan = 1
// 这里进行判断
// 如果当前行的id和下一行的id相等
// 就把当前v.rowspan + 1
// 下一行的v.rowspan - 1
for (let j = i + 1; j < this.tableData.length; j++) {
//此处可根据相同字段进行合并,此处是根据的id
if (this.tableData[i].id === this.tableData[j].id) {
this.tableData[i].rowspan++;
this.tableData[j].rowspan--;
}
}
// 这里跳过已经重复的数据
i = i + this.tableData[i].rowspan - 1;
}
}
}
};
</script>
<style lang="scss" scoped>
</style>
参考文章地址:https://blog.csdn.net/fkl978830065/article/details/102492489