Vue.js Bootstrap Table：如何提取表格行ID并收集到数据属性中

方法一：批量提取（适合一次性获取所有行ID） #

先在组件的data中定义存储ID的数组和对象：

data() {
  return {
    tableData: [], // 表格数据源
    rowIds: [],    // 存储所有行ID的数组
    rowIdMap: {}   // 存储ID与对应行数据的对象（键为ID，值为行数据）
  }
}

方式1：在获取表格数据后直接处理

如果是通过接口请求获取表格数据，可在数据返回后直接提取ID：

async fetchTableData() {
  const response = await this.$api.getTableData(); // 替换成你的接口请求
  this.tableData = response.data;
  
  // 提取ID到数组
  this.rowIds = this.tableData.map(item => item.id);
  // 构建ID与行数据的映射对象
  this.rowIdMap = this.tableData.reduce((map, item) => {
    map[item.id] = item;
    return map;
  }, {});
}

方式2：利用Bootstrap Table的load-success事件

在表格模板中绑定加载成功事件，自动提取ID：

<b-table :items="tableData" @load-success="handleTableLoad">
  <!-- 你的单元格插槽 -->
  <template v-slot:cell(label)="row">
    <div>
      <div class="label"></div>
    </div>
  </template>
</b-table>

对应事件处理方法：

methods: {
  handleTableLoad(data) {
    this.rowIds = data.items.map(item => item.id);
    this.rowIdMap = data.items.reduce((map, item) => {
      map[item.id] = item;
      return map;
    }, {});
  }
}

方法二：实时同步（适合动态增删行的场景） #

如果表格数据会动态变化（比如新增、删除、编辑行），可以通过监听数据变化来实时更新ID集合：

watch: {
  tableData: {
    deep: true, // 深度监听数组内对象的变化
    handler(newData) {
      this.rowIds = newData.map(item => item.id);
      this.rowIdMap = newData.reduce((map, item) => {
        map[item.id] = item;
        return map;
      }, {});
    }
  }
}

也可以在单元格插槽中实时收集（适合需要逐行处理的场景）：

<b-table :items="tableData">
  <template v-slot:cell(label)="row">
    <div>
      <div class="label"></div>
    </div>
    <!-- 渲染时触发收集方法 -->
    {{ collectRowId(row.item) }}
  </template>
</b-table>

对应方法：

methods: {
  collectRowId(item) {
    // 数组去重收集
    if (!this.rowIds.includes(item.id)) {
      this.rowIds.push(item.id);
    }
    // 对象实时更新行数据
    this.rowIdMap[item.id] = item;
  }
}

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