vue - Bootstrap-vue: Select 行（主键）基于具有相同键值的对象

Question

如何 select 每个行都具有来自单独对象的相同值？

<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},
]

Answer 1

使用 JavaScript 的 array.findIndex() and VueBootstrap's selectRow() 似乎可以做到。

模板：

<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-模式 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);
    }
  }

Answer 2

好的，我有第一个解决方案。

我还不能更新 jsfiddle ...

我有 2 个监视函数，每个函数都有一个 for 循环

第一个循环检查是否在separateArray

var TableStore = this.TableStore; // -> ARRAY NO OBJECT
for (var i = 0; i < TableStore.length; i++) {
const row = this.CurrentArray.findIndex(x => x.unID === TableStore[i]);
this.$refs.selectableTable.selectRow(row);
}

第二个检查是否没有。（过滤器/包括 -> CurrentArray - SeparateArray）

vue - Bootstrap-vue: Select 行（主键）基于具有相同键值的对象

vue - Bootstrap-vue: Select row (primary-key) based on an object with the same key values

bootstrap-vue