Bootstrap-Vue的b-table单元格点击事件：传递单元格值至函数

你可以通过在单元格模板的元素上绑定点击事件，将单元格的相关数据（列名、行数据、单元格值）传递给目标函数，以下是具体实现方案：

实现方式 #

1. 自定义列与通用列的点击绑定 #

针对不同类型的单元格，分别绑定点击事件：

<b-table
  striped
  responsive
  class="mb-0"
  :items="permissionsData"
>
  <!-- module列：包裹内容并绑定点击事件 -->
  <template #cell(module)="data">
    <span @click="onPermissionClick(data)">
      {{ data.value }}
    </span>
  </template>
  <!-- 通用列：给复选框和单元格区域绑定事件 -->
  <template #cell()="data">
    <div @click="onPermissionClick(data)">
      <b-form-checkbox
        :checked="data.value"
        @click.stop="onPermissionClick(data)"
      />
    </div>
  </template>
</b-table>

2. 方法接收并处理数据 #

修改onPermissionClick方法，从传入的data对象中提取所需信息：

methods: {
  onPermissionClick(data) {
    // 从data对象中获取列名、行数据、单元格值
    console.log('列名:', data.column.field, '行数据:', data.item, '单元格值:', data.value);
  }
}

注意点 #

• 复选框自带点击事件，需添加@click.stop阻止事件冒泡，避免同一操作触发两次函数调用。
• 若需要点击整个单元格空白区域也触发事件，直接给单元格模板的根容器绑定@click即可。

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