b-table 學習心得

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

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

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

觸發顯示列詳細區塊

針對綁定的 items 中的 item 加入特殊屬性 : _showDetails 並設為 true

垂直置中

.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+useDebounceFn 延遲處理，避免資料較多(超過100筆)時輸入文字卡卡

html

====

<b-form-input autocomplete="off" v-model="filtertextRaw" placeholder="過濾..." style="width:5em"></b-form-input> 

<b-table :filter="filtertext" :fields="欄位s"></b-table>

javascript

====

import { watch, ref } from 'vue';

import { useDebounceFn } from '@vueuse/core';

 const filtertext = ref < string > ('')

 const filtertextRaw = ref < string > (''); // 原始輸入

  // 500ms 去彈跳，降低重算頻率

 watch(

     filtertextRaw,

     useDebounceFn((val: string) => {

         filtertext.value = (val ?? '').trim();

     }, 500)

 );

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

<style scoped>

    .form-check {

        padding-left: 0.5em;

    }

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

        margin-left: unset;

        float:unset;

    }   

</style>