vue 在el-table-column行内添加el-icon-delete-solid 图标,图标只有在鼠标滑过和选中行时才显示...
可以在 el-table-column 中使用 render 函数来实现这个功能。首先,在 el-table 的模板中定义一个 el-table-column,并为其添加一个 render 函数:<template><el-table :data="data"><el-table-column prop="name" label="姓名">&...
可以在 el-table-column 中使用 render 函数来实现这个功能。
首先,在 el-table 的模板中定义一个 el-table-column,并为其添加一个 render 函数:
<template>
<el-table :data="data">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="操作">
<template slot-scope="{ row }">
<el-icon
v-if="row.hover || row.selected"
class="el-icon-delete-solid"
@click="handleDelete(row)"
></el-icon>
</template>
</el-table-column>
</el-table>
</template>
在 render 函数中,可以使用 slot-scope 指令来访问当前行的数据。然后,使用 v-if 指令来判断当前行是否被鼠标滑过或选中。如果是,就显示 el-icon 图标。
为了获取当前行的鼠标滑过和选中状态,可以在 data 中添加两个属性,分别表示当前行是否被鼠标滑过和选中:
data() {
return {
data: [
{ name: "张三", hover: false, selected: false },
{ name: "李四", hover: false, selected: false },
{ name: "王五", hover: false, selected: false }
]
};
},
然后,在 el-table 中添加 @mouseenter.native 和 @mouseleave.native 事件来更新当前行的 hover 状态,以及 @selection-change 事件来更新当前行的 selected 状态:
``` <el-table :data="data" @mouseenter.native="handleMouseenter" @mouseleave.native="handleMouseleave" @selection-change="handleSelectionChange"
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="操作">
<template slot
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)