首頁猿問有沒有童鞋遇到過同樣的問題：Vue...

有沒有童鞋遇到過同樣的問題：Vue+elementUI分頁后使用splice()刪除某一行時出錯各位有什么建議？

JavaScript

手掌心 2019-09-13 09:48:11

項目有個表格頁面使用了elementUI來做,且開啟了分頁.數(shù)據(jù)渲染完成后,測試刪除功能發(fā)現(xiàn)個問題:點擊"刪除"后,除了第一頁正常外,第二頁開始,無論點擊的是哪一行的數(shù)據(jù),刪除的都是第一行(0)的數(shù)據(jù)...,我試過將數(shù)據(jù)直接寫在vue里渲染而不是從后端接口拿,結(jié)果也是一樣的也試過將要刪除的行的scope.$index和數(shù)據(jù)的id打印出來看過,和點擊的是一致的,但刪除的依然是第一行的.是不是我的分頁沒配置好,還是我的刪除方式有問題相關(guān)代碼刪除方法delete(rowData){//刪除文章console.log(rowData)this.tableData.splice(rowData,1)},分頁代碼刪除修改data(){return{pagesize:10,currentPage:1,tableData:[//表格的數(shù)據(jù),從后端拿]}},created:function(){this.total=this.tableData.length},currentChange(currentPage){this.currentPage=currentPage}各位路過的老哥們幫小弟看看,跪謝!!

查看完整描述

2 回答

小唯快跑啊

TA貢獻(xiàn)1863條經(jīng)驗獲得超2個贊

綁定在table上的數(shù)據(jù)是tableData.slice((currentPage-1)*pagesize，和tableData不是同一個數(shù)組了。最好的做法是按分頁參數(shù)從后端獲取，刪除一個之后如果要從數(shù)據(jù)庫刪除數(shù)據(jù)，就得重新調(diào)用列表的接口。如果不涉及后端，建議加一個計算屬性來截取當(dāng)前頁的數(shù)據(jù)，可以適當(dāng)配合watch來實現(xiàn)動態(tài)刪除

反對回復(fù) 2019-09-13

慕妹3146593

TA貢獻(xiàn)1820條經(jīng)驗獲得超9個贊

這個問題是列表綁定數(shù)據(jù)tableData的原因，如果要實現(xiàn)刪除功能的話，最好使用id作為刪除依據(jù)，要用index就需要保持列表數(shù)據(jù)正確，并且不涉及到淺拷貝。使用后臺分頁實現(xiàn)刪除功能：vue表格常見功能如果要使用前臺分頁，可以參考我的博客vue實現(xiàn)前臺分頁。

反對回復(fù) 2019-09-13