element-ui table的勾选问题

Question

在用element-ui的table组件时，表格上的数据是前端分页的，我加上了@selection-change="handleSelectionChange"事件之后每次点击勾选框就会触发两次handleSelectionChange方法，然后导致勾选不了，如果不分页的话不会出现这种情况，请问有人遇见过这种问题吗，求解，谢谢啦

//这种方式正常，只触发一次handleSelectionChange
<el-table 
    :data="list"
    ref="tableCheck"
    border
    :header-cell-style="tableHeaderColor"
    @row-click="clickRow"
    @selection-change="handleSelectionChange">

//这种方式会触发两次handleSelectionChange，有谁能解释一下吗，因为要前端分页，这个data怎么绑定才能只触发一次handleSelectionChange
<el-table 
    :data="list == undefined ? [] : list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    ref="tableCheck"
    border
    :header-cell-style="tableHeaderColor"
    @row-click="clickRow"
    @selection-change="handleSelectionChange">

Answer 1

@selection-change

换一个方法就行了比如@select+@select-all,那个方法会监听数据变化

Answer 2

你得贴代码呀

Answer 3

handleSelectionChange(val) {

this.multipleSelection = val;

}
就这个选择方法啊 为什么会执行两次 这个跟分页没有关系吧 因为我这页面都是这么做的 你有做其他的操作么

Answer 4

在绑定数据时，直接绑定 :data = "list"
如果需要按页码去分页，在watch里监听当前页码currentPage的变化再来对data进行操作
代码
//currentPage是当前的页码
currentPage(new,old) {

    //allData 是从服务器上获取的全部数据，用来获得分页的具体页数
    //当当前页面发生变化时，对应所显示的数据也就会改变
  this.data = this.allData.slice(
    (this.currentPage - 1) * this.pageSize,
    this.currentPage * this.pageSize
  );
}

Answer 5

我也碰到了楼主的问题，不知道有没有使用过:row-key 这个属性呢。

我用的这个属性绑定了 表格数据的唯一标识数据列，比如id，问题就解决了。记得这个属性绑定的数据列，是不能重复的～

Answer 6

你好，这个问题解决了吗怎么解决的能说一下吗？