在线等！Vue+elementUI分页后使用splice()删除某一行时出错求解答！

Question

项目有个表格页面使用了elementUI来做,且开启了分页.
数据渲染完成后,测试删除功能发现个问题:
点击"删除"后,除了第一页正常外,第二页开始,无论点击的是哪一行的数据,删除的都是第一行(0)的数据...,
我试过将数据直接写在vue里渲染而不是从后端接口拿,结果也是一样的
也试过将要删除的行的scope.$index和数据的id打印出来看过,和点击的是一致的,但删除的依然是第一行的.是不是我的分页没配置好,还是我的删除方式有问题
相关代码
删除方法
delete(rowData){//删除文章
console.log(rowData)
this.tableData.splice(rowData,1)
},
分页代码
删除
修改

Answer 1

绑定在table上的数据是tableData.slice((currentPage-1)*pagesize，和tableData不是同一个数组了。最好的做法是按分页参数从后端获取，删除一个之后如果要从数据库删除数据，就得重新调用列表的接口。如果不涉及后端，建议加一个计算属性来截取当前页的数据，可以适当配合watch来实现动态删除

Answer 2

这个问题是列表绑定数据tableData的原因，如果要实现删除功能的话，最好使用id作为删除依据，要用index就需要保持列表数据正确，并且不涉及到浅拷贝。使用后台分页实现删除功能：vue表格常见功能如果要使用前台分页，可以参考我的博客vue实现前台分页。