<template>
<div>
<el-table
:data="tableNewData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
:cell-class-name="tableRowClassName">
<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="amount2"
label="數值 2（元）">
</el-table-column>
<el-table-column
prop="amount3"
label="數值 3（元）">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableNewData:[],
hoverOrderArr:[],
OrderIndexArr:[],
tableData: [{
id: '12987122',
name: '訂單1',
amount1: '1',
amount2: '1',
amount3: 10,
list: [{
amount1:10,
amount2:18652147845,
name:'商品1',
amount3:'061'
},
{
amount1:10,
amount2:18652147845,
name:'商品1',
amount3:'061'
},{
amount1:10,
amount2:18652147845,
name:'商品1',
amount3:'061'
}]
}, {
id: '12987123',
name: '訂單2',
amount1: '2',
amount2: '2',
amount3: 10,
list: [{
amount1:10,
amount2:18652147845,
name:'商品2',
amount3:'062'
}]
}, {
id: '12987124',
name: '訂單3',
amount1: '3',
amount2: '3',
amount3: 10,
list: [{
amount1:10,
amount2:18632147845,
name:'商品3',
amount3:'063'
}]
}, {
id: '12987125',
name: '訂單4',
amount1: '4',
amount2: '4',
amount3: 10,
list: [{
amount1:10,
amount2:18652147845,
name:'商品41',
amount3:'064'
},{
amount1:10,
amount2:18652147845,
name:'商品41',
amount3:'064'
}]
}, {
id: '12987126',
name: '訂單5',
amount1: '5',
amount2: '5',
amount3: 10,
list: [{
amount1:13,
amount2:18652144345,
name:'商品45',
amount3:'065'
}]
}]
};
},
methods: {
// 獲取相同編號的數組
getOrderNumber() {
let OrderObj = {}
this.tableNewData.forEach((element, index) => {
element.rowIndex = index
if (OrderObj[element.id]) {
OrderObj[element.id].push(index)
} else {
OrderObj[element.id] = []
OrderObj[element.id].push(index)
}
})
// 將數組長度大於1的值 存儲到this.OrderIndexArr（也就是需要合併的項）
for (let k in OrderObj) {
if (OrderObj[k].length > 1) {
this.OrderIndexArr.push(OrderObj[k])
}
}
console.log(this.OrderIndexArr,'OrderIndexArr')
},
// 合併單元格
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
}
}
}
}
}
}
},
tableRowClassName({row,rowIndex}) {
let arr = this.hoverOrderArr
for (let i = 0; i < arr.length; i++) {
if (rowIndex == arr[i]) {
return 'hovered-row'
}
}
},
getNewTableData() {
this.tableData.map(res =>{
if(res.list.length == 1) {
res.list.map(item =>{
item.id = res.id;
})
}else{
res.list.map(item =>{
item.id = res.id;
})
}
this.tableNewData.push(res.list);
})
this.tableNewData = this.tableNewData.flat();
console.log('獲取的數據',this.tableNewData)
},
},
mounted() {
this.getNewTableData();
this.getOrderNumber();
}
};
</script>
<style lang="scss" scoped>
.el-table--border, .el-table--group{
border: 1px solid #000;
td{
border-right: 1px solid #000;
}
}
.el-table__row{
border:1px solid #000;
}
.el-table__row td, .el-table--border th {
border: 1px solid #000;
}
.el-table td, .el-table th.is-leaf {
border-bottom: 1px solid #ebeef5;
}
</style>