Vue.js中如何将两个字段组合值作为b-table的主键？

安全阿岳

2026-8-23

解决方案

针对Bootstrap Vue的b-table主键重复问题，有三种可行的方法来组合orgid和repoid作为唯一主键：

方法1：使用复合字段数组（推荐，官方原生支持）

b-table的primary-key支持传入字段名数组，会自动将多个字段组合作为复合主键，无需额外处理数据：

<b-table
  sticky-header="640px"
  striped
  hover
  no-border-collapse
  :primary-key="['orgid', 'repoid']" <!-- 改为数组形式绑定 -->
  :items="items"
  :filter="filter"
  :fields="fields"
  sort-by="updatedAt"
  :sort-desc="true"
>

方法2：预处理数据添加组合字段

在获取仓库数据后，给每个条目添加一个拼接好的唯一字段，再将该字段设为主键：

// 假设rawItems是从接口获取的原始数据
this.items = rawItems.map(item => ({
  ...item,
  orgRepoId: `${item.orgid}-${item.repoid}` // 新增组合字段
}))

模板中指定该字段为主键：

<b-table
  sticky-header="640px"
  striped
  hover
  no-border-collapse
  primary-key="orgRepoId" <!-- 使用新增的组合字段 -->
  :items="items"
  :filter="filter"
  :fields="fields"
  sort-by="updatedAt"
  :sort-desc="true"
>

方法3：使用函数返回唯一标识

通过绑定函数动态生成主键，无需修改原始数据：

<b-table
  sticky-header="640px"
  striped
  hover
  no-border-collapse
  :primary-key="item => `${item.orgid}-${item.repoid}`" <!-- 绑定函数返回组合值 -->
  :items="items"
  :filter="filter"
  :fields="fields"
  sort-by="updatedAt"
  :sort-desc="true"
>