使用element-ui的el-table和el-pagination标签实现表格分页功能以及解决遇到的暂无数据的bug
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
博主需要在项目中需要使用el-table
和el-pagination
标签实现表格分页功能,方法如下:
- el-table标签的
data
属性是显示的数据,绑定为showTable计算属性
<el-table
:data="showTable"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
highlight-current-row
height="400"
style="border:1px solid #dfe6ec;"
v-loading="loading"
>
<el-table-column
type="index"
label="序号"
width="60"
align="center"
></el-table-column>
...
</el-table>
- el-pagination标签
current-change
事件会在当前页改变时被触发,绑定为handleCurrentChange方法,page-size
属性绑定的是每页显示条目个数
<el-col :span="24" class="toolbar" style="text-align:center">
<el-pagination
@current-change="handleCurrentChange"
layout="total, prev, pager, next"
:page-size="pagesize"
:total="this.filterAutomobileInfs.length"
></el-pagination>
</el-col>
- 设置初始化数据并编写事件触发的方法
export default {
data() {
return {
...
pagesize: 10, //设置每页显示条目个数为10
currentPage: 1, //设置当前页默认为1
filterAutomobileInfs: [], //分页前的数据
...
}
},
computed: {
//showTable计算属性通过slice方法计算表格当前应显示的数据
showTable() {
return this.filterAutomobileInfs.slice(
(this.currentPage - 1) * this.pagesize,
this.currentPage * this.pagesize
);
}
},
methods: {
//设置当前页为点击页
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
}
}
}
这样就通过改变表格中绑定的data数据,利用vue
数据驱动这一特点实现了表格分页功能。效果如下:
- 第1页,显示的数据有10条,分页组件显示共有15条数据
- 翻到第2页,显示了剩下5条数据
博主本以为功能已经成功实现,但是理想很丰满,现实很骨感。博主在测试过程中还是发现了一个有趣的bug:功能有时好使有时不好使(不好使的情况是查询条件无误的时候查询后却没有数据)
。遇到这种情况我的表情是这样的:╯﹏╰。根据以往经验,博主首先怀疑是某处的js异步导致的,但是几经折腾却没有什么进展。
于是,博主加强了测试力度,最终得出结论:只有在翻到从第2页开始的之后的页面
查询时才会出现无数据的情况。这回答案应该比较明显了,应该是跟页数
有关。又考虑到vue的数据驱动特性,终于明白了问题所在:
我们点击第2页之后的页数时会改变当前页数,这个时候点击查询,系统根据查询条件筛选符合条件的数组赋值给定义的filterAutomobileInfs
数据项,计算属性通过slice方法筛选表格应显示的数据,而此时currentPage
还是改变后的当前页数,所以导致slice方法筛选的数据索引不正确,出现无数据或数据异常的问题。
知道问题原因就好办多了,只需在查询时重新设置当前页数为1
就好了,如下:
methods: {
//查询方法
searchAutomobile() {
//currentPage赋值为1
this.currentPage = 1;
//筛选方法
this.filterAutomobile();
}
...
}
这次的问题给我带来的启发很多,我们在遇到问题时一定要多做测试探究问题出现的条件和环境,并且多考虑当前技术的原理,希望借此篇博客与大家共勉吧!
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)