b-table 實作選擇機制

html

<b-table borderless="true" head-variant="dark" fixed sticky-header striped hover :items="銷貨單明細" :fields="欄位s" :filter="filter" selectable select-mode="single" ref="table銷貨單明細" v-on:row-selected="onRowSelected">

<template #cell(已選擇)="data">

{{data.rowSelected?'&#10146;':''}} // 標示選擇列

</template>

</b-table> 

javascript

data() {

        return {

選擇位置: null,

已選擇明細s: [],

欄位s: [

{

key: '已選擇',

label: '',

thStyle: { width: '1em' },

tdClass: 'text-center',

},            

...

computed: {

        已選擇明細() {

            for (let a of this.銷貨單明細) {

                if (a.項次 == this.已選擇明細s[0].項次) {

                    return a;

                }

            }            

        },

...

methods: {

        onRowSelected(items) {

            this.已選擇明細s = items;

            if (items.length > 0) this.選擇位置 = this.銷貨單明細.indexOf(this.已選擇明細);

            else if (this.選擇位置 != null) this.選擇明細();

        },

        選擇明細() {

            let $vue = this;

            if (!$vue.$refs.table銷貨單明細.isRowSelected($vue.選擇位置))

                setTimeout(function () {

                    $vue.$refs.table銷貨單明細.selectRow($vue.選擇位置);

                    $vue.選擇明細();

                }, 100);

        },

...

watch: {

       銷貨單明細() {

            if (this.銷貨單明細.length > 0) {

                if (this.選擇位置!=null) this.選擇明細();

            }

        },

...

※透過onRowSelected得到的物件必須視為唯讀，和實際物件不是同一個記憶體位置，而是複製出來的，不可直接判斷物件是否相等，若要修改則先找出對應的物件再修改，可透過computed回傳對應物件