如何使用Bootstrap Vue为表格每行添加hover显示的可点击图标

实现方案 #

步骤1：新增图标专用列配置 #

在你的fields数组开头/末尾新增一个字段，用于承载行旁图标，不需要显示表头：

// 示例fields配置，插入到你现有fields数组的最前/最后位置
fields: [
  {
    key: 'rowActionIcon',
    label: '', // 不显示表头文字
    thClass: 'border-0 p-0 w-0', // 表头无样式、不占宽度
    tdClass: 'position-relative p-0 border-0' // 单元格设为相对定位，方便图标绝对定位
  },
  // 你原来的其他fields配置保留不变
  // ...
]

步骤2：新增对应单元格插槽 #

在b-table内新增#cell(rowActionIcon)插槽，写入你要显示的图标，绑定点击事件：

<template #cell(rowActionIcon)="data">
  <!-- 图标绝对定位到行的左侧外侧，调整right属性可放到右侧 -->
  <i 
    class="fas fa-ellipsis-v position-absolute top-50 start--20 translate-middle-y row-hover-icon cursor-pointer"
    @click="yourCustomHandler(data.item)" // 替换为你自己的处理函数
  />
</template>

步骤3：添加CSS控制hover显示逻辑 #

利用b-table默认的行hover状态控制图标显隐：

/* 默认隐藏图标 */
.row-hover-icon {
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* 行hover时显示当前行的图标 */
.b-table tbody tr:hover .row-hover-icon {
  opacity: 1;
}

上述方案对现有代码侵入性极低，无需修改你已经写好的其他插槽逻辑，图标会悬浮在表格行外侧不占用表格本身的列宽，完全符合行旁显示、hover触发显隐、点击触发自定义函数的需求。如果需要将图标放在表格内部列中，只需去掉图标的绝对定位样式，调整rowActionIcon字段的宽度配置即可。

内容的提问来源于stack exchange，提问作者Lucas