### 实现 `el-table-
column` 中
鼠标移入时
显示预览功能
为了在 Element UI 的 `el-table-
column` 组件中实现当
鼠标悬停于某行
数据上时展示额外信息的效果，可以采用自定义模板的方式，在 `<template>` 标签内编写逻辑来响应
鼠标的进入和离开事件。具体做法是在每一行的
数据项包裹一层容器（如 `div`），并为此容器设置监听器处理这些交互行为。
下面是一个具体的例子：
```html
<el-table :data="tableData">
<!-- ...其他列... -->
<el-table-
column label="操作" width="180px">
<template slot-scope="scope">
<div>
<span>{{ scope.row.name }}</span> <!--
显示默认内容 -- 预览框，默认隐藏 -->
<transition name="fade">
<div v-if="hoveredRow === scope.$index"
class="preview-box"
@mouseleave="handleMouseLeave()">
{{ scope.row.description }}
</div>
</transition>
</div>
<!-- 添加 mouseenter 和 mouseleave 事件处理器 -->
<div style="display:inline-block;"
@mouseenter="handleMouseEnter(scope.$index)"
@mouseleave="handleMouseLeave()">
查看详情
</div>
</template>
</el-table-
column>
</el-table>
```
在此基础上还需要配合 Vue.js 方法来进行状态管理:
```
javascript
export default {
data() {
return {
hoveredRow: null, // 当前悬浮的行索引
tableData: [
{name:'Item A', description:'Description of Item A'},
{name:'Item B', description:'Description of Item B'}
]
}
},
methods: {
handleMouseEnter(index){
this.hoveredRow = index;
},
handleMouseLeave(){
this.hoveredRow = null;
}
}
}
```
这里使用了一个名为 `hoveredRow` 的变量用于追踪当前被选中的行号，并通过条件渲染 (`v-if`) 控制预览框的可见性。同时利用 CSS 过渡类 `.fade-enter-active`,`.fade-leave-active` 来平滑切换视图[^1]。
对于样式部分，则可以根据实际需求调整，比如给预览窗口加上阴影、圆角等装饰效果，以及定位方式使其相对于触发它的元素正确放置。
扫一扫
522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
