Quasar Table: 自定義分頁樣式

說點什麼

一個管理端的系統，最經常使用的是數據表格及分頁。
這裏我記錄一下使用QTable 數據表及QPagination組件來實現想要的數據表格及分頁的過程。

可直接跳至文章末尾，看實現效果：傳送門。

QTable 數據表

首先，從文檔：QTable中能看到不少種表格樣式，找到一款與咱們的項目UI效果類似的來使用：
示例

<q-table
      title="Treats"
      :data="data"
      :columns="columns"
      row-key="name"
      :selected-rows-label="getSelectedString"
      selection="multiple"
      :selected.sync="selected"
    >
</q-table>

methods: {
    getSelectedString () {
      return '' // 不返回空時，table自帶的左下角顯示爲默認的文字
    }
  }

示例中，我將selected-rows-label綁定的方法"getSelectedString"的返回值改成了""，由於咱們這裏不須要表格左下角顯示選中數據的信息。

詳細的代碼再也不粘貼，能夠在上面的示例中打開查看。

從示例中，能夠看到，quasar table默認的分頁是以下：

實現table默認的分頁

實現代碼：

<q-table
      title="Treats"
      :data="data"
      :columns="columns"
      row-key="name"
      :selected-rows-label="getSelectedString"
      selection="multiple"
      :selected.sync="selected"
      :pagination.sync="pagination"
      @request="onRequest"
    >
</q-table>

data中在上面的示例中增長:

pagination: {
        sortBy: 'desc',
        descending: false,
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 0 // 總共數據條數
      },

methods:

onRequest (props) {
      const { page, rowsPerPage, rowsNumber } = props.pagination
      // console.log(`獲取page： ${page}  ${rowsPerPage}`)
      this.pagination.page = page
      if (rowsPerPage === 0) {
        // rowsPerPage 爲0，表示一頁顯示所有數據
        this.pagination.rowsPerPage = rowsNumber
      } else {
        this.pagination.rowsPerPage = rowsPerPage
      }
      this.getTableData()
    },
    getTableData () {
      service({
        url: '/admin/xxxxxx',
        method: 'get',
        params: {
          pageIndex: this.pagination.page, // 頁碼
          pageSize: this.pagination.rowsPerPage, // 每頁數量
         keywords: this.keywords // 查詢參數keywords
        },
        responseType: 'json', // default
        responseEncoding: 'utf8' // default
      })
        .then(response => {
          const rtn = response.data
          this.pagination.rowsNumber = rtn.data.total
          if (rtn.code === 200) {
            this.data = rtn.data.records
          } else {
            this.$q.notify({
              message: rtn.message,
              timeout: 1500,
              type: 'negative',
              position: 'top-right' // 'top', 'left', 'bottom-left' etc
            })
          }
        })
    },

這裏值得一提的是，quasar table默認的分頁，能夠切換每頁的數據條數rowsPerPage，切換這個的時候，有一個選項是all， 是選中所有：

而此時返回的rowsPerPage是0，因此，當 rowsPerPage === 0 時，onRequest方法中，應該將總共的數據條數賦值給rowsPerPage。具體請查看文檔：QTable API

QPagination 組件

Pagination從該文檔中能看到不少分頁的樣式，一樣是找到一款與咱們的項目UI效果類似的來使用：
示例 Pagination: 分頁多的頁碼隱藏爲省略號

自定義 table分頁

可是依然不夠用，由於UI效果中，分頁的左邊顯示數據條數信息，中間是相似上面示例那種分頁多的頁碼隱藏爲省略號，右邊顯示跳轉至n頁，要求輸入頁碼，按下enter方可跳轉。

這個效果很好實現，結合table的v-slot:bottom便可：
實現示例請查看：Quasar Table: 自定義分頁樣式

實現代碼:

<q-table
      title="table 自定義分頁"
      :data="data"
      :columns="columns"
      row-key="name"
      selection="multiple"
      :selected.sync="selected"
      :loading="loading"
      :pagination.sync="pagination"
      @update:selected="getSelected"
      class="table"
    >      
      <template v-slot:loading>
        <q-inner-loading showing color="primary" />
      </template>
      <template v-slot:bottom class="justify-end">
        <div class="q-pa-md flex flex-center">
          <span>
            {{ pagination.rowsPerPage }}條/頁 共
            {{ pagination.rowsNumber }}
            條數據
          </span>
          <q-pagination
            v-model="pagination.page"
            :max="pages"
            :max-pages="5"
            ellipsess
            :direction-links="true"
            @input="changePagination"
          >
          </q-pagination>
          <span>跳至 </span>
          <q-input
            outlined
            v-model="toPage"
            class="pagination-input"
            @input="changeToPage"
            @keyup.enter.native="refreshTableData"
          ></q-input>
          <span> 頁</span>
        </div>
      </template>
    </q-table>

data中在最上面的示例中增長:

loading: true,
      pages: 10, // 數據總頁數
      toPage: '', // 跳轉至

methods

changePagination (val) {
      this.selected = []
      console.log(`changePagination: ${val}`)
      this.pagination.page = val
      this.loading = true
      this.getTableData()
    },
    changeToPage (val) {
      this.selected = []
      var r = /^\+?[1-9][0-9]*$/
      if (r.test(val) && parseInt(val) <= this.pages) {
        // 輸入正整數 且 小於最大頁數
        // console.log(`input toPage: ${val} 是一個正整數`)
      } else {
        this.toPage = ''
      }
    },
    getSelected (newSelected) {
      console.log(`獲取selected： ${JSON.stringify(this.selected)}`)
      console.log(`getSelected獲取newSelected： ${JSON.stringify(newSelected)}`)
      this.selected = newSelected
    },
    refreshTableData (){
      if (this.toPage !== '') {
        this.pagination.page = parseInt(this.toPage)
        this.loading = true
        this.getTableData()
      }
    },
    getTableData(){
    this.loading = true
     //此處應爲接口請求數據 再也不粘貼     
      
    }
    
  },

實現效果

如圖：

文檔

quasar vue-components table
quasar vue-components pagination