在这里插入代码片
<template>
<div>
<button @click="change"> @</button>
<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>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1(元)">
</el-table-column>
<el-table-column
prop="rel"
label="具体数值">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
spanArr:[],
pos:'',
reldata:[
{
id:"1",
name:'张三',
list:[
{
amount1: '第1数量',
rel:'1'
},
{
amount1: '第2数量',
rel:'2'
},
{
amount1: '第3数量',
rel:'3'
}
]
},
{
id:"2",
name:'李四',
list:[
{
amount1: '第1数量',
rel:'2'
},
{
amount1: '第2数量',
rel:'3'
},
{
amount1: '第3数量',
rel:'4'
}
]
}
],
};
},
mounted(){
},
methods: {
change(){
this.reldata.forEach(item=>{
item.list.forEach(sitem=>{
this.tableData.push(
{
id:item.id,
name:item.name,
amount1:sitem.amount1,
rel:sitem.rel,
}
)
})
})
this.getSpanArr(this.tableData)
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) {
const _row = this.spanArr[rowIndex];
console.log(this.spanArr[rowIndex],"")
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
getSpanArr(data) {
if(data&&data.length > 0){
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].id === data[i - 1].id) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
}
},
}
};
</script>
<style scoped>
</style>
element 表格合并
最新推荐文章于 2023-09-26 16:12:43 发布