bootstrap-vue - vue - Bootstrap-vue：根据具有相同键值的对象选择行（主键）

Question

如何从单独的对象中选择具有相同值的每一行？

<b-table
:items="CurrentObject"
:select-mode="selectMode"
ref="selectableTable"
selectable
@row-selected="onRowSelected"
primary-key="uniqueID"
>

当前对象：

[
{name: 'A', uniqueID: 123, text: 'lorem ipsum'},
{name: 'B', uniqueID: 456, text: 'lorem ipsum'},
{name: 'C', uniqueID: 789, text: 'lorem ipsum'},
]

单独的对象：

[
{uniqueID: 123},
{uniqueID: 456},
{uniqueID: 789},
]

标签： bootstrap-vue

Answer 1

使用 JavaScriptarray.findIndex()和 VueBootstrapselectRow()似乎可以做到这一点。

模板：

<template> 
  <b-container>
    <div>
      <h1>Current Object</h1>
      <b-table
      :items="currentObject"
      :select-mode="selectMode"
      ref="selectableTable"
      selectable
      @row-selected="onRowSelected"
      primary-key="uniqueID"
      >
      </b-table>
      <h2>Separate Object</h2>
      <div v-for='object in separateObject' @click='selectMyRow(object.uniqueID);'>{{ object.uniqueID }}</div>
    </div>
  </b-container>
</template>

脚本：

<script lang="ts">
import { Vue } from 'vue-property-decorator';

export default class HelloWorld extends Vue {

  selectMode = 'single';

  currentObject = [
    {name: 'A', uniqueID: 123, text: 'lorem ipsum'},
    {name: 'B', uniqueID: 456, text: 'lorem ipsum'},
    {name: 'C', uniqueID: 789, text: 'lorem ipsum'},
  ];

  separateObject = [
    {uniqueID: 123},
    {uniqueID: 456},
    {uniqueID: 789},
  ];

  selectMyRow(uniqueID) {
    const row = this.currentObject.findIndex(x => x.uniqueID === uniqueID);
    this.$refs.selectableTable.selectRow(row);
  }

  onRowSelected() {
    // do something else
  }
}
</script>

工作示例：

如果相反，您需要使用 select-mode 的类似功能multi，请使用以下内容：

selectMode = 'multi';
...

  selectMyRow(uniqueID) {
    const row = this.currentObject.findIndex(x => x.uniqueID === uniqueID);
    const table = this.$refs.selectableTable
    if (table.isRowSelected(row)) {
      table.unselectRow(row);
    } else {
      table.selectRow(row);
    }
  }