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

Question

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

Answer 1

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

Answer 2

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