说点什么。一个管理系统，最常用的就是数据表和分页。这里记录一下使用QTable数据表和QPagination组件实现想要的数据表和分页的过程。可以直接跳到文末看效果：传送门。QTable数据表格首先从文档：QTable中可以看到多种表格样式，找一个和我们项目UI类似的来使用：Example方法：{getSelectedString(){return''//当不返回空时，表格本身的左下角显示为默认文本}}在例子中，我将绑定到selected-rows的方法“getSelectedString”的返回值更改为-label为“”，因为我们不需要将选中数据的信息显示在表格的左下角。详细代码不再贴出，大家可以在上面的例子中打开查看。从例子中可以看出quasartable默认分页如下：implementtable默认分页实现代码：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(`Getpage:${page}${rowsPerPage}`)this.pagination.page=pageif(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//查询参数关键字},responseType:'json',//默认responseEncoding:'utf8'//默认}).then(response=>{constrtn=response.datathis.pagination.rowsNumber=rtn.data.totalif(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})}})}，这里值得一提的是quasartable默认的分页可以切换每页的rowsPerPage数。切换这个的时候，一个选项是all，是全选：此时返回的rowsPerPage为0，所以当rowsPerPage===0时，在onRequest方法中，要将数据项总数赋值给rowsPerPage具体可以参考文档：QTableAPIQPagination组件Pagination从这个文档中可以看到很多分页样式，也可以找一个类似我们项目UI的来使用：ExamplePagination:pagenumberswithmanypaginations被隐藏为省略号的自定义表格分页还是不行，因为在UI效果上，页面左侧显示的是数据项数，中间的页码隐藏为类似上例的省略号。跳过。这个效果很容易实现，结合表格的v-slot:bottom即可：实现示例请看：QuasarTable:Custompagingstyle实现代码：{{pagination.rowsPerPage}}项/页总计{{pagination.rowsNumber}}项跳到Page
数据中，在最上面的例子中添加：loading:true,pages:10,//数据总页数toPage:'',//跳转到方法changePagination(val){this.selected=[]console.log(`changePagination:${val}`)this.pagination.page=valthis.loading=truethis.getTableData()},changeToPage(val){this.selected=[]varr=/^\+?[1-9][0-9]*$/if(r.test(val)&&parseInt(val)<=this.pages){//输入一个小于最大页数的正整数//console.log(`inputtoPage:${val}isapositiveinteger`)}else{this.toPage=''}},getSelected(newSelected){console.log(`获取选择：${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=truethis.getTableData()}},getTableData(){this.loading=true//这里接口请求数据不要再贴了}}，效果如图：documentquasarvue-componentstablequasarvue-componentspagination
