Project scenario:
Sometimes the list page needs to merge cells for display. At this time, the hover effect that comes with element is not fully selected, as shown in the figure below:
But the final effect is: click on the cell to display all the merged rows.
Required renderings:
solution:
Add the same to the merged rows to prepare currentIndexfor the subsequent dynamic setting of class names.currentIndex
currentIndex: '',
By looking at the element official website, you can know that this event will be triggered when the table cell hover enters/exits.
<el-table
:row-class-name="tableRowClassName"
:cell-style="cellStyle"
@cell-mouse-enter="handleCellMouseEnter"
@cell-mouse-leave="handleCellMouseLeave">
Save myRowIndex of the row where the mouse is located to the dynamic response variable currentIndex
handleCellMouseEnter(row, column, cell, event) {
//鼠标移入后赋值
this.currentIndex = row.productCode; //row.productCode是行相同的标志
this.currentColumnIndex = column.label; //获取列的标题名
},
handleCellMouseLeave() {
//鼠标移走后置空
this.currentIndex = '';
this.currentColumnIndex = '';
},
The color of the row changes row.productCode == this.currentIndexto enable the mouse to select all rows. this.currentColumnIndex == '服务'Only the mouse in the first column will have this effect. The mouse in other columns will not have the effect of selecting all. My first column title is [Service], so I match [Service] according to my own project. Write.
// 行的颜色设置
tableRowClassName({
row }) {
let flag =
row.productCode == this.currentIndex &&
this.currentColumnIndex == '服务';
return flag ? 'quotatemplate-my-hover-row' : '';
},
Styles are written in unscoped styles.
<style>
.el-table .quotatemplate-my-hover-row {
background: #f4f6fa !important;
}
</style>
As shown in the picture below, when my mouse is on the first line, all merged items will be selected.
Next, you need to move the mouse into other cells except the merged cells. At this time, you need to display them in a separate row.
row.productCode == this.currentIndexFind the row that the mouse is moved into. this.currentColumnIndex && this.currentColumnIndex != '服务'This column is not the first column [Service]. That is to say, when the mouse is moved into other columns, the first columnIndex == 0column selected state.
cellStyle({
row, column, rowIndex, columnIndex }) {
let flag =
row.productCode == this.currentIndex &&
(this.currentColumnIndex && this.currentColumnIndex != '服务') &&
columnIndex == 0;
return flag ? 'background: #f4f6fa' : '';
},
The effect is as follows:
Attached: Complete implementation code
<el-table
:data="listTemplateData"
border
:span-method="objectSpanMethod"
:row-class-name="tableRowClassName"
:cell-style="cellStyle"
@cell-mouse-enter="handleCellMouseEnter"
@cell-mouse-leave="handleCellMouseLeave">
currentIndex: '',
currentColumnIndex: '',
methods: {
// 合并列表【服务】项
// 通过给table传入span-method方法可以实现合并行或列，
// 方法的参数是一个对象，
// 里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。
// 该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。
// 也可以返回一个键名为rowspan和colspan的对象。
objectSpanMethod({
row, column, rowIndex, columnIndex }) {
if (row && column && columnIndex === 0) {
// this.tableData 修改
const _row = this.flitterData(this.listTemplateData).one[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
flitterData(arr) {
let spanOneArr = [];
let concatOne = 0;
arr.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1);
} else {
//name 修改
if (item.productName === arr[index - 1].productName) {
//第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
} else {
spanOneArr.push(1);
concatOne = index;
}
}
});
return {
one: spanOneArr,
};
},
handleCellMouseEnter(row, column, cell, event) {
this.currentIndex = row.productCode;
this.currentColumnIndex = column.label;
},
handleCellMouseLeave() {
this.currentIndex = '';
this.currentColumnIndex = '';
},
// 行的颜色设置
tableRowClassName({
row }) {
let flag =
row.productCode == this.currentIndex &&
this.currentColumnIndex == '服务';
return flag ? 'quotatemplate-my-hover-row' : '';
},
cellStyle({
row, column, rowIndex, columnIndex }) {
let flag =
row.productCode == this.currentIndex &&
(this.currentColumnIndex && this.currentColumnIndex != '服务') &&
columnIndex == 0;
return flag ? 'background: #f4f6fa' : '';
},
<style>
.el-table .quotatemplate-my-hover-row {
background: #f4f6fa !important;
}
</style>
Reference article: Solution to the problem of hover style exception after el-table span-method merges rows