element商品订单表格

<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>