elementUI的table表分页多选_elemnetui table 多选分页-CSDN博客

本文链接：https://blog.csdn.net/taoyiw/article/details/118726973

这段代码展示了如何在Vue中处理表格的多选操作，包括从API获取数据填充表格，根据用户选择更新表格项的选中状态，并实现数组去重以避免重复项。同时，它还实现了选择变化时的回调函数，用于管理已选中的表格行。

摘要由CSDN通过智能技术生成

getList(){
    api.getData({pageNo:this.pageNo,recordsPerPage:this.recordsPerPage}).then(res=>{
        this.list=res.data.reply.result
        this.total=res.data.reply.paginator.total
    }).then(()=>{
        this.mutipleSelection.forEach(item=>{
            this.list.forEach(listItem=>{
                if(item.name==listItem.name){
                    this.$refs.mutipleTable.toggleRowSelection(listItem,true)
                }
            })

        })
     })
},

selectChange(arr,row){//在table表上添加@select="selectChange"方法
    if(this.mutipleSelection.length>0){
       this.mutipleSelection.forEach((item,index)=>{
            if(item.name==row.name){
                if(arr.indexOf(row)==-1){//判断是勾选还是取消勾选，如果是-1则是取消勾选，否则就是勾选
                    this.mutipleSelection.splice(index,-1)
                }else{
                    this.mutipleSelection.push(row)
                }
            }else{
                this.mutipleSelection.push(row)
                this.mutipleSelection=unique(this.mutipleSelection)//数组去重，当                            
this.mutipleSelection的长度大于1时，一个值会加入多次，所以先去重
            }
        }) 
    }else{
        this.mutipleSelection.push(row)
    }
}

unique是数组去重的方法，另外操作成功之后，利用this.$refs.multipleTable.clearSelection()清空选项