elementui树表格使用checkbox并可自动勾选

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_36784628/article/details/93160990

一、elementui树表格使用checkbox并自动勾选

1、html，要使用默认checkbox的type

2、递归找出树长度、动态绑定

 3、根据点击获取的数据、勾选树表格，getcheckedcopy_是拆开树数据变为没有层级的

            getcheckFloor (treeData,clickdata) { //递归使checkbox勾选
                this.getcheckedcopy_=[]
                let this_ = this
                let index = -1
                function each (treeData,clickdata) {
                    for(let i = 0;i<treeData.length;i++){
                        index++;
                        this_.getcheckedcopy_.push(treeData[i])
                        for(let y=0;y<clickdata.length;y++){
                            if(treeData[i].id == clickdata[y].menu_id){
                                this_.selemodel[index].selectvalue = true
                            }
                        }
                        if(treeData[i].children){
                            each(treeData[i].children,clickdata);
                        }
                    }
                }
                each(treeData,clickdata);
            },
            clickRole(row){
                this.getselectded = row
                this.checkedall = false
                let this_ = this
                for (var i = 0; i < this.menulength; i++) { //先清掉所有
                    this.selemodel[i].selectvalue = ""
                }
                this.$refs.menuTable.clearSelection()
                this.Ajax({
                    url:"/clickRole",
                    data:{role_id:row.id},
                    func:(res=>{
                        this.getchecked = res.data.rows
                        this.getcheckedcopy =JSON.parse(JSON.stringify(this.getchecked));
                        this.getcheckFloor(this.menutableData,res.data.rows)
                        this.checkornot()
                    })
                })
            },

4、使用elementui的全选事件控制全选按钮、根据checkbox绑定值是否为true判定为勾选

            checkornot(){
                let getchecked=[]
                for(let i=0;i<this.getcheckedcopy_.length;i++){//获取勾选数据
                    if(this.selemodel[i].selectvalue == true){
                        getchecked.push(this.getcheckedcopy_[i])
                    }
                }
                if(getchecked.length == this.getcheckedcopy_.length){
                    this.$refs.menuTable.toggleAllSelection()
                    this.checkedall=false
                }
                if(this.checkedall){//控制全选按钮
                    for (let i = 0; i < this.menulength; i++) { //先清掉所有
                        if(this.selemodel[i].selectvalue == ''||this.selemodel[i].selectvalue == false){
                            this.$refs.menuTable.clearSelection()
                            this.checkedall = false
                            break;
                        }
                    }
                } 
            },