87.el-table翻页后保存前一页所选并再次返回前一页时把数据勾选上

1.首先给<el-table>添加ref、row-key、选择单条事件、全选事件

 <el-table ...... ref="newTable" row-key="resource_id" @select="selectItem" @select-all="selectAll" ..........>

 2.初始化选中的数组checkList

 data(){

        return{

                checkList:[],

        }

}

 3.实现选择单条数据方法

// 选择单条

selectItem(list,row){

        this.checkList.push(row)

}

 4.实现选择全部方法

// 选择全部

selectAll(selection){

        // 若取消全选，则当前页的选中数据移除

        if(selection.length===0){

                const ids = this.tableData.map((i) =>{

                        return i.resource_id

                })

                for(var i = 0;i<this.checkList.length;i++){

                        if(ids.indexOf(this.checkList[i].resource_id) > -1){

                                this.checkList.splice(i,1)

                                i--

                        }

                }

        }

        const arr = [...selection,...this.checkList]

        this.checkList = Array.from(new Set(arr))

}

5.当翻页时会调获取表格数据接口，在此方法内判断checkList数组数据对表格做勾选

getTableLink(data){

        ......

        // 在接口返回数据赋值给tableData后

        let newArr = []

        this.checkList.forEach((item) =>{

                this.tableData.forEach(val =>{

                        if(val.resource_id === item.resource_id){

                                newArr.push(val)

                        }

                })

        )

        let _this = this

        this.$nextTick(() =>{

                if(newArr){

                        newArr.forEach((row) =>{

                                _this.$refs.newTable.toggleRowSelection(row,true)

                        })

                }

        })

}

6.最后别忘了在离开该页面时将checkList数组置为空数组！！

beforeDestroy(){

        this.checkList = []

}

以上就是在表格翻页时保存翻页前选中的数据并返回那页后再次勾选上的解决方案。

每天积累一个小知识 坚持！