需求 element 树后台要求传json数组格式的

初始化数据格式

image.png

tree的结构要求必须一级和二级的名称一致

image.png

但是后台希望给他的数据格式是json数据格式的 比如[{code1:code,code2:code}] ,在我这里就是区分版块code和栏目code，而且要一一对应
然后根据tree的change事件 得到 全选的和半选的状态

 ###@check="handleCheckedSectionColumns"
<el-form-item prop="sectionUserPoList" label="菜单权限">
                    <el-tree
                            v-model="dialogForm.sectionUserPoList"
                            class="ztree"
                            accordion
                            :data="sectionColumns"
                            show-checkbox
                            ref="tree"
                            node-key="sectionCode"
                            :default-checked-keys="sectionColumnsCheckedList"
                            :props="defaultProps"
                            @check-change="handleCheckChange"
                            @check="handleCheckedSectionColumns"
                    >
                    </el-tree>
                </el-form-item>

然后再mothods里面写逻辑,根据后台给的type==1是一级 type=2是二级 然后组装数据

methods:{
    //校验的时候用
            handleCheckChange() {
                this.dialogForm.sectionUserPoList = this.$refs.tree.getCheckedNodes()
            },
            //tree 选中的所有code
            handleCheckedSectionColumns(data,checked){
                //全选
                let checkedAll=[] //选中的所有数据
                checked.checkedNodes.map(item=>{
                    if(item.type===1&&item.sectionColumns){//有栏目
                        let sectionColumnCodeArr=item.sectionColumns.map(val=>{
                            return {
                                sectionColumnCode:val.sectionCode
                            }
                        });
                        sectionColumnCodeArr.map(k=>{
                            checkedAll.push(Object.assign({},k,{
                                sectionCode:item.sectionCode
                            }))
                        });
                    }
                })
                //半选
                checked.halfCheckedNodes.map(item=>{
                    if(item.type===1&&item.sectionColumns){
                        item.sectionColumns.map(val=>{
                            checked.checkedNodes.filter(k=>{
                                if(k.sectionCode===val.sectionCode){
                                    checkedAll.push({
                                        sectionColumnCode:val.sectionCode,
                                        sectionCode:item.sectionCode
                                    });
                                }
                            })
                        });

                    }
                })
                this.dialogForm.sectionUserPoList=checkedAll
            },
}

编辑回显的时候

details(data){
                this.$nextTick(() => {
                        this.dialogForm.id=data.id;
                        this.dialogForm.psncode=data.psncode;
                        this.dialogForm.userInfo=data.psncode;
                        this.dialogForm.psnname=data.psnname;
                        this.dialogForm.approveOrgName=data.deptname;
                        this.dialogForm.status=data.status
                        //组装板块code和栏目code是list
                        let sectionColumnCode=[];
                        if(data&&data.sectionUserVoList.length>0){
                            data.sectionUserVoList.map(item=>{
                                if(item.sectionCode){
                                    sectionColumnCode.push(item.sectionCode)
                                    sectionColumnCode.push(item.sectionColumnCode)
                                }
                                return sectionColumnCode
                            })
                        }
                        // 根据组装的板块和栏目code，回显tree
                        this.$nextTick(() => {   // 这个一定不能省略，因为第一次获取 this.$refs.tree可能是null
                            sectionColumnCode.forEach(item=> {
                                const node = this.$refs.tree.getNode(item)
                                this.$refs.tree.setChecked(node, true)
                            })
                        })
                })
            },
```