1、在vue页面methods定义方法
methods: {
flitterData () {
const spanOneArr = []
let concatOne = 0
// 循环后端查询出来的数据(tableData)，这里直接在data()中定义好了
this.tableData.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1)
} else {
// 需合并相同内容的字段，根据id判断，将id相同的name、classname合并
if (item.id === this.tableData[index - 1].id) {
spanOneArr[concatOne] += 1
spanOneArr.push(0)
} else {
spanOneArr.push(1)
concatOne = index
}
}
})
return {
one: spanOneArr
}
},
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
// 判断是否是第一、二列，如果是就将第一、二列相同字段进行合并
if (columnIndex === 0 || columnIndex === 1) {
// this.tableData 修改
const _row = (this.flitterData(this.tableData).one)[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
}
2、在vue页面定义data
data () {
return {
// 接收后端传值数据
tableData: []
}
}
3、在vue页面定义table
ref="projectTable" v-loading="loading" :data="tableData" :span-method="objectSpanMethod" border :header-cell-style="{color: 'black',fontWeight: 'bold',textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" height="590px"> 完整代码： ref="projectTable" v-loading="loading" :data="tableData" :span-method="objectSpanMethod" border :header-cell-style="{color: 'black',fontWeight: 'bold',textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" height="590px"> 效果图：
