b-table 學習心得

※table 綁定的 items 和原始陣列不同，是透過複製得到，因此修改 items 不會連動修改原始陣列

事件函數不支援中文，除非加上()，但這樣就無法取得預設參數

ex: v-on:row-clicked="選擇資料"

垂直置中

.table td, .table th {

        vertical-align: middle;

}

內距縮小 : 加入 small 屬性

若內含按鈕會呼叫後端，搭配 b-spinner 會造成目前捲軸位置跑掉

解法1 : 記憶捲軸位置

解法2 : 呼叫後端不要顯示 b-spinner (其他情況呼叫後端才顯示 b-spinner)

※ 可能是 webform 才會有此問題

※ 後來發現使用 b-pagination 分頁時，change 事件會在未換頁時一樣觸發(例如新增或刪除資料)，若於換頁時自動設定捲軸置頂，就會被干擾，必須另外用變數記錄頁數比對是否真的有換頁

垂直捲軸置頂(通常用在查詢後)

$('#b-table').parent().scrollTop(0);

加入 primary-key 屬性可以改善效能(尚須確認)

<b-table primary-key="xxx" 

過濾文字機制不要直接綁定屬性，改用 watch 延遲設定，避免資料較多(超過100筆)時輸入文字卡卡

<b-input v-model="filtertext" placeholder="過濾..."></b-input> 

<b-table :filter="filter"

 watch: {

                filtertext(newVal, oldVal) {

                    clearTimeout(this.$_timeout);

                    this.$_timeout = setTimeout(() => {

                        this.filter = newVal

                    }, 500); // set this value to your preferred debounce timeout

                }

            },

欄位為單一核取方塊的置中效果

<style scoped>

    .form-check {

        padding-left: 0.5em;

    }

    :deep(.form-check) .form-check-input {

        margin-left: unset;

        float:unset;

    }   

</style>