说明:
1、type="selection"选中事件
2、@cell-mouse-enter鼠标移到列表触发事件
问题:执行@cell-mouse-enter的时候会直接取消type="selection"选中事件。
解决方法:
cellMouseEnter(row, column, cell, event) {
let Arr = JSON.parse(JSON.stringify(this.listData));
for (let index = 0; index < Arr.length; index++) {
const element = Arr[index];
// 匹配滑过的当前行
if (element.id === row.id) {
element["hoverFlag1"] = true;
} else {
element["hoverFlag1"] = false;
}
}
this.listData = JSON.parse(JSON.stringify(Arr));
let rows = [];
//获取选中数据dataonLineListSelections
if (this.dataonLineListSelections.length > 0) {
for (let i = 0; i < this.listData.length; i++) {
if (this.listData[i].id == this.dataonLineListSelections[0].id) {
rows.push(this.listData[i]);
this.$nextTick(() => {
rows.forEach(row => {
//重新定义type="selection"
this.$refs.table.toggleRowSelection(row);
});
});
}
}
}
}
以上是编程学习网小编为您介绍的“el-table解决@cell-mouse-enter和type="selection"同时存在bug”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:el-table解决@cell-mouse-enter和type="selection"同时存在bug


猜你喜欢
- 【vue】class、style的用法 2023-10-08
- div可以输入内容不用input作为输入框屏蔽自动的input样式 2024-01-03
- 由document.body和document.documentElement想到的 2023-12-24
- 详解vue-cli脚手架build目录中的dev-server.js配置文件 2024-03-09
- vue Pc端微信支付和支付宝支付 2023-10-08
- js编写一个简单的产品放大效果代码 2024-01-03
- CSS清除浮动方法小结 2024-01-02
- 使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码 2024-02-05
- HTML5 video标签的poster属性图片铺满整个屏幕 2023-07-08
- 巧妙运用CSS立刻改变鼠标的样式 2024-01-05