话不多说,先上全部代码~
<el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod">
<el-table-column prop="quarter" label="季度" align="center" />
<el-table-column prop="department" label="部门" align="center" />
<el-table-column prop="name" label="姓名" align="center" />
<el-table-column prop="sale" label="销售额" align="center" />
</el-table>
<script>
export default {
name: "Order",
data() {
return {
spanMap: {}, // 合并单元格所需数据
tableData: [
{
quarter: "第一季度",
department: "销售部",
name: "张三",
sale: "9000",
clothes: {
type: 'hat'
}
},
{
quarter: "第一季度",
department: "销售部",
name: "李四",
sale: "6542",
clothes: {
type: 'hat'
}
},
{
quarter: "第一季度",
department: "技术部",
name: "王五",
sale: "7900",
clothes: {
type: 'hat'
}
},
{
quarter: "第二季度",
department: "技术部",
name: "赵六",
sale: "5487",
clothes: {
type: 'hat'
}
},
{
quarter: "第二季度",
department: "产品部",
name: "钱八",
sale: "9000",
clothes: {
type: 'hat'
}
},
{
quarter: "第二季度",
department: "产品部",
name: "陈九",
sale: "",
clothes: {
type: 'hat'
}
},
{
quarter: "第三季度",
department: "人事部",
name: "小亮",
sale: "",
clothes: {
type: 'hat'
}
},
{
quarter: "第三季度",
department: "人事部",
name: "小明",
sale: "7900",
clothes: {
type: 'hat'
}
},
{
quarter: "第三季度",
department: "销售部",
name: "李华",
sale: "7900",
clothes: {
type: 'hat'
}
}
]
}
},
created() {
this.getSpanArr(this.tableData, ['quarter', 'department,quarter'])
},
methods: {
getSpanArr(data, mergeField = []) {
if (!mergeField.length) {
return
}
for (let i = 0; i < data.length; i++) {
if (i === 0) {
// 对于第一个元素,初始化每个指定的合并字段在spanMap对象中的信息
mergeField.forEach(column => {
const item = column.split(',')
const key = item[0].split('.')[0]
this.spanMap[key] = {
spanArr: [1], // spanArr用于存储连续元素的数量,初始值为1,因为至少有一个连续元素
pos: 0 // pos表示当前处理的连续元素的位置
}
});
} else {
// 对于后续元素,逐个处理指定的合并字段
mergeField.forEach(column => {
const columnArr = column.split(',')
const key = columnArr[0].split('.')[0]
const res = columnArr.every(item => {
// 空值不合并
if (data[i][item] === '' || data[i - 1][item] === '') {
return false
}
return data[i][item] === data[i - 1][item]
})
if (res) {
// 如果当前元素的指定字段与前一个元素的指定字段相同,表示可以合并
// 则增加spanArr中对应字段的位置处的值,并将0添加到spanArr表示有另一个连续元素
this.spanMap[key].spanArr[this.spanMap[key].pos] += 1;
this.spanMap[key].spanArr.push(0);
} else {
// 如果当前元素的指定字段与前一个元素的指定字段不同,表示连续序列中断
// 则将1添加到spanArr表示开始了一个新的连续元素序列,并更新pos为当前位置
this.spanMap[key].spanArr.push(1);
this.spanMap[key].pos = i;
}
});
}
}
// 输出计算得到的spanMap对象,用于调试和查看结果
console.log(this.spanMap, 'spanMap');
},
objectSpanMethod({ column, rowIndex }) {
if (this.spanMap[column.property]) {
const rowspan = this.spanMap[column.property].spanArr[rowIndex];
const colspan = rowspan > 0 ? 1 : 0;
return {
rowspan,
colspan
}
}
}
},
};
</script>
核心部分就是getSpanArr函数,该函数作用是获取合并单元格所需参数,它会传入两个参数,第一个参数就是表格数据,第二个参数是指定合并行的数组,可支持多个,例如:
this.getSpanArr(this.tableData, ['quarter', 'department'])
效果如下:
但是这里会有个问题,技术部这里因为所属不同季度,不想让它合并怎么办? 这里就可以通过数组里单个元素配置多个字段,用逗号隔开就可以了。含义是第一个是需要合并的字段,后面是需要同时满足条件的字段才会合并,例如:['quarter', 'department,quarter'],department就是需要合并的字段,但是前提条件是quarter字段也符合才会合并。当然也可以不止两个哦~
下面是一个例子
this.getSpanArr(this.tableData, ['quarter', 'department,quarter'])
效果图
如果表格数据某一项的字段是对象,也可以像下面这样使用
this.getSpanArr(this.tableData, ['clothes.type'])
如果对你有帮助,麻烦给点个赞吧~