用specName(el.specName === row.specName)和id的区别(el.id === row.id),使用id的时候id是唯一值,判断的时候不会出现重复情况,使用specName的时候,如果有重复的值,会出现合并错位的情况。
解决方案:先按照specType进行排序,然后按specType的值进行分组,合并的规则是每一个分组的第一列进行合并{ rowspan: length, colspan: 1 }
,其它列跳过{ rowspan: 0, colspan: 0 }
。
<template>
<Table :columns="columns" :data="data" border :span-method="handleSpan">
<template #specType="{ row }">{{ specTypes[row.specType] }}</template>
</Table>
</template>
<script>
export default {
data () {
return {
specTypes: {
1: '烟支形式',
2: '包装形式',
3: '滤棒形式'
},
columns: [
{
title: 'Date',
type: 'index'
},
{
title: 'specType',
key: 'specType',
slot: 'specType'
},
{
title: 'specName',
key: 'specName'
}
],
data: [
{
"specName": "标准支",
specType: 1
},{
"specName": "标准支",
specType: 1
}, {
"specName": "多元复合",
specType: 3
}, {
"specName": "中支",
specType: 1
}, {
"specName": "标准硬盒",
specType: 2
}, {
"specName": "细支",
specType: 1
}, {
"specName": "标准软盒",
specType: 2
}, {
"specName": "标准",
specType: 3
}
],
obj: {}
}
},
created () {
// 第一步:分组排序
this.data = this.data.map((el, idx) => {
el.id = idx
return el
}).sort((a, b) => a.specType - b.specType)
// 第二步:分类分组,为了后续单元格合并单元时所处数组索引
this.obj = this.data.reduce((total, cur, idx) => {
if (!total[cur.specType]) {
total[cur.specType] = this.data.filter(el => el.specType === cur.specType)
}
return total
}, {})
},
methods: {
handleSpan ({ row, column, rowIndex, columnIndex }) {
// 第三步:判断是否第二列,是进行单元格合并处理,否则正常显示(即1-1)
// tmp===
// const children = this.data.filter(el => el.specType === row.specType)
if (columnIndex === 1) {
// 拿到当前所属分组的所有元素
const tmp = this.obj[row.specType]
// 获取当前单元格所在元素对应分组的索引
// 如果是当前分组的第一个元素则进行合并处理,否则直接跳过即(0)
const idx = tmp.findIndex(el => el.id === row.id)
// tmp===
// const idx = children.findIndex(el => el.specName === row.specName)
return {
// rowspan: idx === 0 ? children.length : 0,
rowspan: idx === 0 ? tmp.length : 0,
colspan: 1
}
}
return {
rowspan: 1,
colspan: 1
}
}
}
}
</script>