如何从单独的对象中选择具有相同值的每一行?
<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},
]
最佳答案
使用 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);
}
}
关于bootstrap-vue - vue-Bootstrap-vue : Select row (primary-key) based on an object with the same key values,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66422534/