方法1(有bug,点击table任意位置table数据全部丢失):<el-table :data="tableData" border :span-method="mergeRow"> //添加:span-method="mergeRow"
return {
column_row_offset: {
testNumber: [1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],//各表头字段名
testSubject: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
testNetworkTime: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
testTime: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
testRoom: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
testJoinExam: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
testResit: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
testResults: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
testMaster: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
testCustomerService: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
testBusinesService: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
testRemarks: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
testOperation: [1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
/*<el-table-column
prop="testNumber" label="补考费"
header-align="center" align="center">
</el-table-column>*/
},
now_col_row_num: {},
now_col_offset: {},
}
methods:{
mergeRow ({ row, column, rowIndex, columnIndex }) {
if (!this.now_col_row_num[column.property]) {
this.now_col_row_num[column.property] = Object.assign([], this.column_row_offset[column.property])
let a = this.now_col_row_num[column.property].shift()
this.now_col_offset[column.property] = a
return {
rowspan: a,
colspan: 1
}
} else if (rowIndex >= this.now_col_offset[column.property]) {
let a = this.now_col_row_num[column.property].shift()
this.now_col_offset[column.property] += a
return {
rowspan: a,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
},
}
方法2:
<template>
<div class="mine">
<el-table ref="multipleTable" max-height="600" border :span-method="objectSpanMethod" :row-class-name="tableRowClassName"
@cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter" :data="tableData" style="width: 80%;margin:0 auto;">
<el-table-column prop="order_number" label="订单编号" width="200px" align="center">
</el-table-column>
<el-table-column label="买家账号" align="center">
<template slot-scope="scope">
<p>{{scope.row.username}}</p>
</template>
</el-table-column>
<el-table-column label="下单时间" width="180px" align="center">
<template slot-scope="scope">
<p>{{scope.row.addtime.split(" ")[0]}}</p>
<p>{{scope.row.addtime.split(" ")[1]}}</p>
</template>
</el-table-column>
<el-table-column label="订单状态" align="center">
<template slot-scope="scope">
<div v-if="scope.row.status==0">待付款</div>
<div v-if="scope.row.status==1">待发货</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'mine',
data () {
return {
tableData: [
{
id: 1,
order_id: 2,
order_number: "1",
status: "0",
addtime: "昨天",
username: 13
},
{
id: 1,
order_id: 2,
order_number: "1",
status: "1",
addtime: "明天",
username: 13
},
{
id: 1,
order_id: 2,
order_number: "2",
status: "0",
addtime: "今天",
username: 13
}
],
rowIndex: '-1',
OrderIndexArr: [],
hoverOrderArr: [],
msg: ''
}
},
mounted: function () {
this.getOrderNumber()
},
methods: {
// 获取相同编号的数组
getOrderNumber: function () {
var OrderObj = {}
this.tableData.forEach(function (element, index) {
element.rowIndex = index
if (OrderObj[element.order_number]) {
OrderObj[element.order_number].push(index)
} else {
OrderObj[element.order_number] = []
OrderObj[element.order_number].push(index)
}
}, this);
for (var k in OrderObj) {
if (OrderObj[k].length > 1) {
this.OrderIndexArr.push(OrderObj[k])
}
}
},
// 合并单元格
objectSpanMethod: function ({row,column,rowIndex,columnIndex}) {
if (columnIndex === 0 || columnIndex === 3) {
for (var i = 0; i < this.OrderIndexArr.length; i++) {
var element = this.OrderIndexArr[i]
for (var j = 0; j < element.length; j++) {
var 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: function ({row,rowIndex}) {
var arr = this.hoverOrderArr
for (var i = 0; i < arr.length; i++) {
if (rowIndex == arr[i]) {
return 'success-row'
}
}
},
cellMouseEnter: function (row, column, cell, event) {
this.rowIndex = row.rowIndex
this.hoverOrderArr = []
this.OrderIndexArr.forEach(function (element) {
if (element.indexOf(this.rowIndex) >= 0) {
this.hoverOrderArr = element
}
}, this);
},
cellMouseLeave: function (row, column, cell, event) {
this.rowIndex = '-1'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.el-table .success-row {
background: #f5f7fa;
}
.el-table__header tr>th {
background: #f8f8f8 !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #dcdfe6;
border-color: #dcdfe6;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
background-color: #dcdfe6;
border-color: #dcdfe6;
}
</style>