1.结构
<template>
<!-- 顶部导航信息 -->
<el-row class="selectclass" >
<el-table
:data="tableData"
@cell-mouse-enter="handleMouse"
@cell-mouse-leave="handleMouseLeve"
:span-method="handleObjectSpanMethod"
highlight-current-row
tooltip-effect="light"
border stripe
@row-click="handleRowClick"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</el-row>
</template>
2.style
<style lang="scss">
.selectclass{
//鼠标移上class
.selection {
background-color: #87cefa!important;
td{
background-color: #87cefa!important;
}
}
//因为elementui表格自带的hover样式和点击样式有渐变
//我们把渐变去掉
.el-table--enable-row-transition .el-table__body td {
-webkit-transition: background-color 0s ease;
transition: background-color 0s ease;
}
}
</style>
3.逻辑
<script>
export default {
watch: {
},
computed: {
},
data() {
return {
spanData:[],//存合并规则
indexpushList:[],
newRow:{},
trs:'',//点击表格,存节点,初始化值必须是 ''
hovertrs:'',//鼠标移上,存节点,初始化必须是 ''
pos:null,//计算表格行所需变量
tableData: [{
date: '2016-05-02',
name: '王小虎2',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎1',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-01',
name: '王小虎1',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎1',
address: '上海市普陀区金沙江路 1516 弄'
}]
};
},
methods: {
//清空鼠标移上class
removeClass(){
this.$nextTick(()=> {
for (let i=0; i <this.tableData.length ; i++) {
if(this.hovertrs[i].className!==null){
this.hovertrs[i].classList.remove('selection');
}
}
})
},
//清空选中行class
clearClassName(){
for(var j=0;j<this.trs.length;j++){
// console.log(this.trs[j].className)
if(this.trs[j].className.toString().indexOf('current-row')>-1){
this.trs[j].classList.remove('current-row');
}
}
},
//鼠标移出事件
handleMouseLeve () {
this.removeClass()
},
// 鼠标移入事件
handleMouse (row, column, cell, event) {
var index1=row.index
if(this.hovertrs===''&&event.path[2].innerHTML.indexOf('<tr')>-1&&event.path[1].nextSibling.className!==null){
this.hovertrs=event.path[1].parentNode.children
}
if(this.spanData[index1]>1){
// 清空class
this.removeClass()
this.$nextTick(()=> {
for (let i=index1; i <index1+this.spanData[index1] ; i++) {
if(this.hovertrs[i]&&this.hovertrs[i].className!==null){
this.$nextTick(()=> {
// if((i/2).toString().indexOf('.')==-1){
// }else{
this.hovertrs[i].classList += ' selection';
// }
})
}
}
})
}else if(this.spanData[index1]==1){
this.removeClass()
this.$nextTick(()=> {
if(this.hovertrs[index1]&&this.hovertrs[index1].className!==null){this.hovertrs[index1].classList += ' selection';}
})
}else if(this.spanData[index1]==0){
this.removeClass()
this.$nextTick(()=> {
var setclasslength=0//0向前找
var starIndex=0
for (let index = index1-1; index >-1 ; index--) {
if(this.spanData[index]>0&&starIndex==0){
setclasslength=this.spanData[index]
starIndex=index
}
}
for (let i=starIndex; i <starIndex+setclasslength ; i++) {
if(this.hovertrs[i].className!==null){
// if((i/2).toString().indexOf('.')==-1){
// }else{
this.hovertrs[i].classList += ' selection';
// }
}
}
})
}
},
//点击行触发
handleRowClick(row, column, event) {
var rows=[row]//this.spanData
var index1=row.index
this.clearClassName()
if(event.path[2].innerHTML.indexOf('<tr')>-1&&event.path[1].nextSibling.className!==null){
this.trs=event.path[1].parentNode.children
}else if(event.path[2].nextSibling.className!==null){
this.trs=event.path[2].parentNode.children
}
if(this.spanData[index1]>1){
this.$nextTick(()=> {
for (let i=index1; i <index1+this.spanData[index1] ; i++) {
if(this.trs[i].className!==null){
this.$nextTick(()=> {
this.trs[i].classList += ' current-row';
})
}
}
})
}else if(this.spanData[index1]==1){
this.$nextTick(()=> {
this.trs[index1].classList += ' current-row';
})
}else if(this.spanData[index1]==0){
this.$nextTick(()=> {
var setclasslength=0//0向前找
var starIndex=0
for (let index = index1-1; index >-1 ; index--) {
if(this.spanData[index]>0&&starIndex==0){
setclasslength=this.spanData[index]
starIndex=index
}
}
for (let i=starIndex; i <starIndex+setclasslength ; i++) {
if(this.trs[i].className!==null){
this.trs[i].classList += ' current-row';
}
}
})
}
this.newRow = row;
},
// 表格合并
// 计算需要合并的单元格
getSpanData(data) {
// 存放计算好的合并单元格的规则
this.spanData = []
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanData.push(1)
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同(以data中的name做对比)
if (data[i].name == data[i - 1].name) {
this.spanData[this.pos] += 1
this.spanData.push(0)
} else {
this.spanData.push(1)
this.pos = i
}
}
}
console.log(this.spanData)
},
// 合并单元格
handleObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
//columnIndex合并几列,这里代表的是合并name的那列,0列
if (columnIndex < 1) {
const _row = this.spanData[rowIndex]
// console.log('_row',_row)
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
},
mounted() {
// 为数组添加index方便处理
var indexpushList=[]
var newlist=[...this.tableData]
newlist.forEach((item,index)=>{
indexpushList.push({...item,'index':index})
})
this.tableData=indexpushList
this.getSpanData(this.tableData)
}
}
</script>
表格合并的是我看的别人的,选中高亮和鼠标移上高亮是我自己写的。
表格合并原文链接
https://blog.csdn.net/qq_37932700/article/details/103052810