参照下面这个方法,可以实现很多种情况下的行合并
效果:因为无法上传效果图,直接上代码,请见谅
1:如果你是先请求数据,那就拿到请求结果的时候做如下逻辑,我用的假数据,在created或者mounted做如下逻辑都可以
```javascript
this.tableData = [{ wuliao: '黄豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '*****', supplyCode: '*****', supplyName: '丽丽'},
{ wuliao: '黄豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '麻子'},
{ wuliao: '黄豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '张三'},
{ wuliao: '绿豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '李四'},
{ wuliao: '绿豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '王五'},
{ wuliao: '绿豆', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '哈哈'},
{ wuliao: '红枣', wuliaoCode: '******', wuliaoName: '黄豆', compName: '******', supplyCode: '******', supplyName: '嘻嘻'}
]
var totalArr = []
var arr = []
this.tableData.forEach((item, index) => {
arr.push(item)
if ((this.tableData[index + 1] && item.wuliao !== this.tableData[index + 1].wuliao) || !this.tableData[index + 1]) {
arr.forEach((it, ind) => {
if (ind === 0) {
it.rowSpan = arr.length
} else {
it.rowSpan = 0
}
})
totalArr.push(...arr)
arr = []
}
})
this.tableData = totalArr
如上是处理表格的data的逻辑
2,在methods中定义表格合并的方法
```javascript
changeRowSpan(value, row, index) {
return {
children: value,
attrs: {
rowSpan: row.rowSpan
}
}
}
3.在自定的table的columns数据中,找到dataIndex为物料的那一项,把methods中定义的方法赋值给那一项的customRender
columns: [
{
title: '物料类别',
dataIndex: 'wuliao',
width: '88px',
align: 'center',
customRender: this.changeColSpan
},
{
title: '物料编码',
dataIndex: 'wuliaoCode',
width: '78px',
align: 'center'
},
{
title: '物料名称',
dataIndex: 'wuliaoName',
width: '78px',
align: 'center'
}
],
完美实现合并效果
我只是拿一个属性举例,其它的都可仿照如上的方式