2021年4月14日 星期三

b-table 分頁設定

<b-pagination style="margin:1em 0" v-model="currentPage" :total-rows="totalRows" :per-page="perPage" :change="換頁()"></b-pagination>

<b-table id="b-table" :per-page="perPage" :current-page="currentPage" head-variant="dark" v-grid fixed sticky-header striped hover :items="gridData" :fields="fields" :filter="filter" v-on:filtered="onFiltered">  

data() {
                return {
                    perPage: 100,
                    currentPage: 1,
                    totalRows:0, // 取得資料後更新

methods: {
                換頁() {
                     // 每次換頁時自動捲到最上面(若有異動資料也會觸發,必須另外用變數記錄目前是第幾頁來決定是否置頂)
                     if (this.currentPage != this.prePage) {
                        $('#b-table').parent().scrollTop(0);
                        this.prePage = this.currentPage;
                    }
                },
                onFiltered(filteredItems) { // 為了filter 可以跨頁正確運作
                    this.totalRows = filteredItems.length; 
                    this.currentPage = 1;
                },

2021年4月12日 星期一

設定元素高度為可用剩餘高度

<html style="height: 100%;">
<body style="height: 100%; display: flex; flex-direction: column;">
<div>...</div>
<div id="app" style="flex-grow: 1; flex-basis: 0; display: flex; flex-direction: column;">
  <div>...</div>
  <form id="form1" style="flex-grow: 1; flex-basis: 0; display: flex; flex-direction: column;">
      <b-table style="flex-grow: 1; flex-basis: 0; max-height:unset " sticky-header :items="items" :fields="fields" :filter="filter">
      </b-table>
  </form>
</div>
</body>
</html>

※設定 max-height:unset 覆蓋原預設值:300px

b-table sticky column 針對多個欄位凍結的設定方式

第二個以後的欄位需要設定left 避免往右捲動時覆蓋前面的欄位

<style>
        ._2ndtd {
            left:50px !important;
        }
        ._3ndtd {
            left:140px !important;
        }
</style> 

fields: [
                        {
                            key: 'a',
                            stickyColumn: true,
                            thStyle: { width: '50px' },
                        },
                        {
                            key: 'b',
                            stickyColumn: true,
                            thStyle: { width: '90px' },
                            thClass: '_2ndtd',
                            tdClass: '_2ndtd',
                        },
                        {
                            key: 'c',
                            stickyColumn: true,
                            thStyle: { width: '90px'},
                            thClass: '_3ndtd',
                            tdClass: '_3ndtd',
                        },

※ 使用 stickyColumn: true 就不能使用 sortable: true,否則會造成異常現象

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器