欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

elementUI的table表分页多选

程序员文章站 2022-07-14 08:43:17
...
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()清空选项

相关标签: javascript