效果图
完整代码
<template>
<div class="app-container">
<el-table ref="multipleTable" border :data="tableData" :span-method="objectSpanMethod"
@cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter" :cell-class-name="tableRowClassName">
<el-table-column label="商品类别" align="center">
<template slot-scope="scope" width="160">
<div>{{scope.row.productType}}</div>
</template>
</el-table-column>
<el-table-column label="商品价格" align="center">
<template slot-scope="scope">
<p>{{scope.row.price}}</p>
</template>
</el-table-column>
<el-table-column label="商品名称" width="180px" align="center">
<template slot-scope="scope">
<p>{{scope.row.productName}}</p>
</template>
</el-table-column>
<el-table-column label="操作人员" align="center">
<template slot-scope="scope">
<p>{{scope.row.operator}}</p>
</template>
</el-table-column>
<el-table-column prop="updateTime" label="更新时间" align="center">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'tool',
data() {
return {
tableData: [
{
productType: "纺织品",
productName: '男装上衣',
amount: 20,
operate_number: "20180831142020",
price: "31.00",
updateTime: "2018-08-31",
operator: "小吴"
},{
productType: "纺织品",
productName: '男装裤子',
amount: 20,
operate_number: "20180831142020",
price: "32.00",
updateTime: "2018-08-31",
operator: "小吴"
},{
productType: "饮料",
productName: '康师傅冰红茶',
amount: 20,
operate_number: "20180823142020",
price: "33.00",
updateTime: "2018-08-31",
operator: "小吴"
},{
productType: "纺织品",
productName: '男装裤子',
amount: 10,
operate_number: "20180821142020",
price: "34.00",
updateTime: "2018-08-31",
operator: "小王"
},{
productType: "绸缎",
productName: '旗袍',
amount: 200,
operate_number: "20180821142020",
price: "35.00",
updateTime: "2018-08-31",
operator: "小吴"
},{
productType: "绸缎",
productName: '席子',
amount: 20,
operate_number: "20180821142020",
price: "36.00",
updateTime: "2018-08-31",
operator: "小吴"
},
],
orderIndexArr: [],
hoverOrderArr: [],
}
},
created() {
},
mounted() {
this.getOrderNumber();
},
methods: {
getOrderNumber() {
let orderObj = {}
this.tableData.forEach((element, index) => {
element.rowIndex = index
if (orderObj[element.operate_number]) {
orderObj[element.operate_number].push(index)
} else {
orderObj[element.operate_number] = []
orderObj[element.operate_number].push(index)
}
})
for (let k in orderObj) {
if (orderObj[k].length > 1) {
this.orderIndexArr.push(orderObj[k])
}
}
},
objectSpanMethod({row,column,rowIndex,columnIndex}) {
if (columnIndex === 0 || columnIndex === 3 || columnIndex === 4) {
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'
}
}
},
cellMouseEnter(row, column, cell, event) {
this.rowIndex = row.rowIndex;
this.hoverOrderArr = [];
this.orderIndexArr.forEach(element => {
if (element.indexOf(this.rowIndex) >= 0) {
this.hoverOrderArr = element
}
})
},
cellMouseLeave(row, column, cell, event) {
this.rowIndex = '-1'
this.hoverOrderArr = [];
},
handleEdit(row) {
},
handleDelete(row) {
}
}
};
</script>
<style lang="scss" scoped>
.el-table {
::v-deep .hovered-row {
background: #f5f7fa;
}
}
</style>
注意
目前我们表格数据是假数据,但实际上是要从数据库查询返回来的。
通过实际测试可以发现,mounted方法中 拿不到 created方法中赋值过的表格数据。因为请求可能有延迟。
所以我们可以在调用 getOrderNumber方法时可以延时500毫秒在调用,就可以解决这个问题。
mounted() {
setTimeout(() => {
this.getOrderNumber();
}, 500);
},
如果有收获! 希望老铁们来个三连,点赞、收藏、转发。
创作不易,别忘点个赞,可以让更多的人看到这篇文章,顺便鼓励我写出更好的博客
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)