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

Answer 1

使用 JavaScript 的

array.findIndex()

和 VueBootstrap 的

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>

工作示例：

如果您需要使用选择模式

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 - DifferentArray）

Answer 3

提供的两种解决方案仅在不使用排序、过滤或分页时才有效。

这是因为

items

，在这种情况下

currentObject

并不代表实际的视觉项目。

要在使用排序、过滤或分页时选择正确的项目，您必须使用：

this.$refs.selectableTable.computedItems.findIndex(x => x.uniqueID === uniqueID);

我创建了一个小提琴，在使用排序时提供迈克代码的工作适应：

https://jsfiddle.net/jz59wn18/