可以在 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
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐