el-table selection 禁用的话 划过tooltip
时间: 2024-10-22 18:00:55 浏览: 16
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
在Element UI的表格组件`el-table`中,如果设置了`selection`属性以禁用选择功能,那么当用户鼠标滑过某个单元格时,通常默认的选中状态提示(如高亮和显示的"已选择"文本)会被隐藏。这是为了保持简洁和一致的交互体验,因为既然选择了禁用选择,相应的反馈也应该同步调整。
如果你想自定义这种行为并添加提示信息,可以考虑监听`cell-mouse-enter`和`cell-mouse-leave`事件,在事件处理函数中控制显示和隐藏相应的提示工具栏(tooltip)。例如,你可以设置一个变量来控制是否显示提示,并在进入和离开单元格时更新这个变量。
```javascript
<template>
<el-table
:selection="multipleSelection"
@cell-mouse-enter="enterCell"
@cell-mouse-leave="leaveCell"
></el-table>
</template>
<script>
export default {
data() {
return {
multipleSelection: { disabled: true },
tooltipVisible: false,
};
},
methods: {
enterCell(row, column, cellEl) {
this.tooltipVisible = !this.multipleSelection.disabled;
},
leaveCell(row, column, cellEl) {
this.tooltipVisible = false;
},
},
// 其他配置...
}
</script>
```
在这个例子中,`enterCell`会在鼠标移入单元格时将`tooltipVisible`设为`true`,而`leaveCell`则会将其恢复为`false`。然后在CSS中针对`tooltipVisible`的状态来控制tooltip的显示与否。
阅读全文