Vue实现table合并相同列
发布网友
发布时间：2022-12-16 18:44
共1个回答
热心网友
时间：2023-09-18 05:23
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
标签中用 span-method引用定义的objectSpanMethod方法
<el-table p=""> </el-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">
完整代码：
<el-table p=""> </el-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">
效果图：
