vue+elementui实现表格行合并
程序员文章站
2022-03-04 11:34:29
...
getOrderNumber() {
let OrderObj = {}
this.tableData.forEach((element, index) => {
element.rowIndex = index
if (OrderObj[element.billType]) {
OrderObj[element.billType].push(index)
} else {
OrderObj[element.billType] = []
OrderObj[element.billType].push(index)
}
})
// 将数组长度大于1的值 存储到this.OrderIndexArr(也就是需要合并的项)
for (let k in OrderObj) {
if (OrderObj[k].length > 1) {
this.OrderIndexArr.push(OrderObj[k])
}
}
},
objectSpanMethod({row,column,rowIndex,columnIndex}) {
if (columnIndex === 0 ) {
for (let i = 0; i < this.OrderIndexArr.length; i++) {
let element = this.OrderIndexArr[i]
for (let j = 0; j < element.length; j++) {
let item = element[j]
if (rowIndex === item) {
if (j === 0) {
return {
rowspan: element.length,
colspan: 1
}
} else if (j !== 0) {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
},
data(){
return{
OrderIndexArr: [],
tableData:[]
}
}
<el-table ref="multipleTable" border :span-method="objectSpanMethod"
v-loading="listLoading"
:data="tableData">
</el-table>
mounted(){
获得数据后调用this.getOrderNumber()方法
}
上一篇: Optional
下一篇: JDK8 Optional类