el-select包含el-tree组件实现添加、编辑回显、选择功能

html代码

<el-row> 
   <el-col :span="11">
       <el-form-item  label="需打分部门：" prop="departments">
           <el-select v-model="gradeRule.departments"  placeholder="请选择部门" multiple >
                <el-option :value="stateValue"  style="height: auto">
                     <el-tree 
                         :check-strictly="true"
                         :data="departmentData"
                         show-checkbox 
                         node-key="id" 
                         ref="tree" 
                         highlight-current
                         :props="defaultProps" 
                         @check="mulCheck"></el-tree>
               </el-option>
           </el-select>
       </el-form-item>              
  </el-col>

获取树型列表数据

data中定义

数据赋值给 this.departmentData

数据显示

点击勾选添加操作

需要把选中的数据checked字段变为true再把整个树结构传给后台完成添加。 使用check事件获取选中节点

mulCheck(allNode,selectNode){
    let arrLabel = [];
    let arrIds = [];
    selectNode.checkedNodes.forEach(item => {
        item.checked = true;
        arrLabel.push(item.text);
        arrIds.push(item.id);
    });
    this.gradeRule.departments= arrLabel;
    this.stateValue = arrLabel;
    if(this.dialogState === 'editRule'){
        this.isFalse(this.departmentData,arrIds)
    }
    console.log(this .gradeRule.departments);
}

页面效果

编辑回显

调接口,后台给我的数据是整个树结构,选中的checked为true, 没选中的为false

调接口把取到的树结构赋值

this.departmentData = res.data.body.treeNodeList

把checked为true的值取出来赋值给下拉框和节点（实现数据回显）

setName(departmentData){
    departmentData.forEach(item =>{
        if(item.checked){
            this.names.push(item.text);
            this.ids.push(item.id);
        }
        if(item.children){
            this.setName(item.children);
        }
    })
    this.gradeRule.departments = this.names;     //给下拉框赋值
    this.stateValue = this.names;
    this.$refs.tree.setCheckedKeys(this.ids);    //给树结构赋值
},

在这里调用

页面效果   下拉框和树结构都回显了

修改数据：操作tree，选中的为true，取消选中的checked为false。

isFalse(departmentData, arrIds) {
    departmentData.forEach(item =>{
        if(item.checked == true && (!arrIds.includes(item.id))){
            item.checked = false
        }
        if(item.children){
            this.isFalse(item.children,arrIds)
        }
    })
},

在mulCheck方法中调用 判断只有编辑的时候调用