今天记录一下elementUI 相同元素合并行
把id相同的单元格进行合并
数据为
tableData: [{
id: '1',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '1',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '1',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '2',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '3',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '3',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '3',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '3',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '5',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '5',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
话不多说
直接上代码
需要两个方法
/*
这个方法是
控制单元格的
返回值是一个对象
例如:返回
return {
rowspan: 2,
colspan: 1
}
是把当前的一个单元格和正下方的单元格合并
且
下一个单元格要返回
return {
rowspan: 0,
colspan: 0
}
这是API给的
我发现
返回
return {
rowspan: 0,
colspan: 1
}
也是可以的
那合并单元格就十分容易了
前提是数据已经根据id进行排序
假如id为3的有四个数据
只需要返回
[4,1]
[0,1]
[0,1]
[0,1]
即可
用下面的setrowspans方法进行处理即可
*/
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
return {
rowspan: row.rowspan,
colspan: 1
}
}
},
setrowspans() {
// 先给所有的数据都加一个v.rowspan = 1
this.tableData.forEach(v => {
v.rowspan = 1
})
// 双层循环
for (let i = 0; i < this.tableData.length; i++) {
// 内层循环,上面已经给所有的行都加了v.rowspan = 1
// 这里进行判断
// 如果当前行的id和下一行的id相等
// 就把当前v.rowspan + 1
// 下一行的v.rowspan - 1
for (let j = i + 1; j < this.tableData.length; j++) {
if (this.tableData[i].id === this.tableData[j].id) {
this.tableData[i].rowspan++
this.tableData[j].rowspan--
}
}
// 这里跳过已经重复的数据
i = i + this.tableData[i].rowspan - 1
}
}
完整代码如下
<template>
<div class="wscn-http404-container">
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column
prop="id"
label="ID"
width="180"
/>
<el-table-column
prop="name"
label="姓名"
/>
<el-table-column
prop="amount1"
label="数值 1(元)"
/>
<el-table-column
prop="amount2"
label="数值 2(元)"
/>
<el-table-column
prop="amount3"
label="数值 3(元)"
/>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: '1',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '1',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '1',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '2',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '3',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '3',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '3',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '3',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '5',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
id: '5',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
}
},
created() {
this.setrowspans()
},
methods: {
/*
这个方法是
控制单元格的
返回值是一个对象
例如:返回
return {
rowspan: 2,
colspan: 1
}
是把当前的一个单元格和正下方的单元格合并
且
下一个单元格要返回
return {
rowspan: 0,
colspan: 0
}
这是API给的
我发现
返回
return {
rowspan: 0,
colspan: 1
}
也是可以的
那合并单元格就十分容易了
前提是数据已经根据id进行排序
假如id为3的有四个数据
只需要返回
[4,1]
[0,1]
[0,1]
[0,1]
即可
用下面的setrowspans方法进行处理即可
*/
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
return {
rowspan: row.rowspan,
colspan: 1
}
}
},
setrowspans() {
// 先给所有的数据都加一个v.rowspan = 1
this.tableData.forEach(v => {
v.rowspan = 1
})
// 双层循环
for (let i = 0; i < this.tableData.length; i++) {
// 内层循环,上面已经给所有的行都加了v.rowspan = 1
// 这里进行判断
// 如果当前行的id和下一行的id相等
// 就把当前v.rowspan + 1
// 下一行的v.rowspan - 1
for (let j = i + 1; j < this.tableData.length; j++) {
if (this.tableData[i].id === this.tableData[j].id) {
this.tableData[i].rowspan++
this.tableData[j].rowspan--
}
}
// 这里跳过已经重复的数据
i = i + this.tableData[i].rowspan - 1
}
}
}
}
</script>
<style lang="scss" scoped>
</style>