说点什么

一个管理端的系统，最常用的是数据表格及分页。

这里我记录一下使用QTable 数据表及QPagination组件来实现想要的数据表格及分页的过程。

可直接跳至文章末尾，看实现效果：传送门。

QTable 数据表

首先，从文档：QTable中能看到很多种表格样式，找到一款与我们的项目UI效果相似的来使用：

示例

title="Treats"

:data="data"

:columns="columns"

row-key="name"

:selected-rows-label="getSelectedString"

selection="multiple"

:selected.sync="selected"

>

methods: {

getSelectedString () {

return '' // 不返回空时，table自带的左下角显示为默认的文字

}

}

示例中，我将selected-rows-label绑定的方法”getSelectedString“的返回值改为了””，因为我们这里不需要表格左下角显示选中数据的信息。

详细的代码不再粘贴，可以在上面的示例中打开查看。

从示例中，可以看到，quasar table默认的分页是如下：

实现table默认的分页

实现代码：

title="Treats"

:data="data"

:columns="columns"

row-key="name"

:selected-rows-label="getSelectedString"

selection="multiple"

:selected.sync="selected"

:pagination.sync="pagination"

@request="onRequest"

>

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: 自定义分页样式

实现代码:

title="table 自定义分页"

:data="data"

:columns="columns"

row-key="name"

selection="multiple"

:selected.sync="selected"

:loading="loading"

:pagination.sync="pagination"

@update:selected="getSelected"

class="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

//此处应为接口请求数据 不再粘贴

}

},

实现效果

如图：

文档