:data="tableNewData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" :cell-class-name="tableRowClassName"> prop="id" label="ID" width="180"> prop="name" label="姓名"> prop="amount1" label="数值 1(元)"> prop="amount2" label="数值 2(元)"> prop="amount3" label="数值 3(元)">
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();
}
};
.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;
}