Quasar Table: 自定义分页样式
2020/4/8 5:01:27
本文主要是介绍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
这篇关于Quasar Table: 自定义分页样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)