发现问题
在使用el-table当数据量越来越多时就需要考虑引入element-ui的另一个组件:el-pagination,实现数据分页
当数据分页完成后又发现了新问题:之前好好的多选不可用了。。。
而且发现每次点击勾选框都会触发两次handleSelectionChange方法,然后导致勾选不了
解决问题
经过测试验证,最终定位问题主要出现在table的data绑定这一步,那么最有可能导致的原因就是data绑定的数据必须是确定的,因此需要在动态拿到确定数据后,再绑定到data上。
<el-table :data="tableDataList" @selection-change="handleSelectionChange">
...
</el-table>
computed: {
tableDataList() {
return this.$store.getters.sites.slice(
(this.currentPage - 1) * this.pagesize,
this.currentPage * this.pagesize
)
},
},
完美解决!