how can I select each rows with the same values from a separate object?
<b-table
:items="CurrentObject"
:select-mode="selectMode"
ref="selectableTable"
selectable
@row-selected="onRowSelected"
primary-key="uniqueID"
>
CurrentObject:
[
{name: 'A', uniqueID: 123, text: 'lorem ipsum'},
{name: 'B', uniqueID: 456, text: 'lorem ipsum'},
{name: 'C', uniqueID: 789, text: 'lorem ipsum'},
]
Separate Object:
[
{uniqueID: 123},
{uniqueID: 456},
{uniqueID: 789},
]
Using JavaScript's array.findIndex() and VueBootstrap's selectRow() seem to do it.
Template:
<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:
<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>
Working example:
If instead, you need similar functionality using select-mode multi, use the following:
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);
}
}
OK, I have the first solution for me.
I couldn't update the jsfiddle yet ...
I have 2 watch functions, each with a for loop
the first loop checks whether in 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);
}
the second checks whether not. (filter / includes -> CurrentArray - SeparateArray)
The two offered solutions only work if sorting, filtering or pagination are not being used.
This is because items, in this case currentObject, doesn't represent the actual visual items.
To select the correct item when using sorting, filtering or pagination, you have to use:
this.$refs.selectableTable.computedItems.findIndex(x => x.uniqueID === uniqueID);
I've created a fiddle providing a working adaption of Mike's code when sorting is used:
