Vue Bootstrap b-table遍历行匹配用户邮箱渲染按钮实现方法

你不需要额外编写循环遍历整表数据，b-table的#cell(xxx)作用域插槽暴露的row参数，本身就包含当前渲染行的完整上下文数据。之前的写法硬编码取数组索引[0]永远只会匹配第一行，自定义的循环方法也存在逻辑缺陷：循环中每次匹配结果都会覆盖之前的match值，最终返回的只是最后一行的匹配结果，自然不符合预期。

1. 最简内联写法 #

直接在插槽内取当前行的邮箱字段和登录用户邮箱比对即可，不需要额外添加v-for指令，b-table渲染每一行的actions单元格时会自动执行当前行的判断逻辑：

<b-table
  :items="selectedGrant.interested_agencies"
  :fields="interestedAgenciesFields"
>
  <template #cell(actions)="row">
    <!-- 直接取当前行的user_email做比对，匹配成功才显示删除按钮 -->
    <b-row v-if="loggedInUser.email === row.item.user_email">
      <b-button variant="danger" class="mr-1" size="sm" @click="unmarkGrantAsInterested(row)">
        <b-icon icon="trash-fill" aria-hidden="true"></b-icon>
      </b-button>
    </b-row>
  </template>
</b-table>

注意：插槽返回的row是单元格上下文对象，当前行的原始业务数据存在row.item属性下，直接访问对应字段即可，不需要手动去原数组按索引查找。

2. 抽离判断方法（适合复杂校验场景） #

如果校验规则复杂（比如需要同时判断用户角色、数据状态等），可以把校验逻辑抽离成通用方法，传入当前行数据返回布尔值：
首先在组件方法中定义校验函数：

methods: {
  checkRowDeletePermission(rowItem) {
    // 可扩展任意多校验规则
    return this.loggedInUser.email === rowItem.user_email
  }
}

模板中直接调用方法传入当前行数据即可：

<template #cell(actions)="row">
  <b-row v-if="checkRowDeletePermission(row.item)">
    <b-button variant="danger" class="mr-1" size="sm" @click="unmarkGrantAsInterested(row)">
      <b-icon icon="trash-fill" aria-hidden="true"></b-icon>
    </b-button>
  </b-row>
</template>

• 硬编码数组索引[0]：永远只会取列表第一行数据做比对，和当前正在渲染的行没有关联
• 自定义循环逻辑缺陷：循环过程中每次比对都会重置match变量值，最终返回的只是最后一行的比对结果，前面行的匹配结果会被后续循环覆盖
• 冗余的v-for尝试：b-table组件本身已经会自动遍历绑定的items数组逐行渲染，不需要在单元格插槽内额外加循环，强行添加反而会导致内容重复渲染、逻辑错乱

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