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