首先先上效果
合并思路
HTMl
<el-table
:data="tableData"
style="width: 100%; margin-bottom: 20px; border: solid 1px black"
row-key="id"
:cell-style="{ borderColor: 'gray' }"
:header-cell-style="{ borderColor: 'gray' }"
border
size="mini"
:span-method="objectSpanMethod"
>
<el-table-column prop="type" label="类型" width="80"> </el-table-column>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="phone" label="电话"> </el-table-column>
<el-table-column prop="emile" label="邮件"> </el-table-column>
</el-table>
数据
tableData: [
{
id: 1,
type: "a",
date: "2016-05-02",
name: "王小虎1",
address: "上海市普陀区金沙江路 1518 弄",
phone: "12",
emile: "12",
},
{
id: 2,
type: "a",
date: "2016-05-04",
name: "王小虎2",
address: "上海市普陀区金沙江路 1517 弄",
phone: "12",
emile: "12",
},
{
id: 3,
type: "a",
date: "2016-05-01",
name: "王小虎2",
address: "上海市普陀区金沙江路 1519 弄",
phone: "12",
emile: "12",
},
{
id: 4,
type: "a",
date: "2016-05-01",
name: "王小虎2",
address: "上海市普陀区金沙江路 1519 弄",
phone: "12",
emile: "12",
},
{
id: 5,
type: "b",
date: "2016-05-01",
name: "王小虎3",
address: "上海市普陀区金沙江路 1516 弄",
phone: "12",
emile: "12",
},
{
id: 6,
type: "b",
date: "2016-05-03",
name: "王小虎4",
address: "上海市普陀区金沙江路 1516 弄",
phone: "12",
emile: "12",
},
{
id: 7,
type: "b",
date: "2016-05-03",
name: "王小虎41",
address: "上海市普陀区金沙江路 1516 弄",
phone: "12",
emile: "12",
},
{
id: 8,
type: "c",
date: "2016-05-03",
name: "王小虎4",
address: "上海市普陀区金沙江路 1516 弄",
phone: "12",
emile: "12",
},
{
id: 9,
type: "c",
date: "2016-05-03",
name: "王小虎3",
address: "上海市普陀区金沙江路 1516 弄",
phone: "12",
emile: "12",
},
],
合并方法
objectSpanMethod({ row, column, rowIndex }) {
// 需要合并单元格对应的列
const arr = ["type", "date", "name", "address", "phone"];
if (arr.indexOf(column.property) !== -1) {
// 需要校验的字段
const data = arr.slice(0, arr.indexOf(column.property) + 1);
// 每一条第一次出现时对应的索引
const first = this.tableData.findIndex((item) => {
return data.every((v) => item[v] === row[v]);
});
if (rowIndex === first) {
// 同一条出现的条数
const rowspan = this.tableData.filter((item) => {
return data.every((v) => item[v] === row[v]);
}).length;
return {
rowspan,
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
},