vue 可合并表格组件_Vue+Element-ui<根据相同字段合并表格>

效果图：

image.png

代码如下：

:data="tableData"

:span-method="objectSpanMethod"

border

style="width: 100%; margin-top: 20px"

>

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;

}

}

}

};