下拉框包含树结构

效果如图

<el-select class="form-input" v-model="form.obj.name" clearable @clear="resetChecked">
 <el-option style="height: auto; padding:0" :value="form.obj">
   <el-tree :data="deptListsByTree" show-checkbox :highlight-current="true" ref="treeForm" node-key="code"
     @node-click="handleNodeClick" :props="defaultProps">
     <span class="custom-tree-node" slot-scope="{ node, data }">
       <el-input readonly v-model="node.label" :disabled="data.disabled" />
     </span>
   </el-tree>
 </el-option>
</el-select>

赋值方面

select form.obj.name // 财务部
option form.obj // {name:‘财务部’,id:1}
tree. treeList

defaultProps: {
  children: "children",
  label: "name",
  value: "id",
  disabled: "disabled"
}

关于删除

清除树选中结构 下拉数据也会消失

clearable // 是否可以清空选项

clear // 可清空的单选模式下用户点击清空按钮时触发

解决方式 深拷贝

renderContent(){
  let deptList = JSON.parse(JSON.stringify(this.deptList))
  this.addDisabledTag(deptList, this.deptDetail.id, false);
}

根据业务情况 选择禁用

业务场景

进入部门详情时 出现 ‘上级部门’ （现在写的组件 下拉树）

禁止选择 当前部门 和 当前子部门

handleNodeClick(data) {
  if (!data.disabled) {
    this.deptForm.parentDeptStr = data;
  }
},
addDisabledTag(data, disabledId, isDisabled = false) {
  data.map(k => {
    k["disabled"] = isDisabled ? isDisabled : k.id == disabledId;
    return this.addDisabledTag(k.children, disabledId, k["disabled"]);
  });
  this.deptListsByTree = data;
}

this.addDisabledTag(treelist, 当前部门详情id, false);

参考样式

<style lang='scss' scoped>
::v-deep {
  .form-input {
    .el-select-dropdown__empty {
      display: none !important;
    }
  }

  .el-tree {
    .el-tree-node is-focusable {
      height: 34px !important;
      line-height: 34px !important;
    }

    .el-tree-node__content {
      height: auto !important;
    }
  }

  .el-checkbox {
    display: none;
  }

  .custom-tree-node {
    .el-input__inner {
      border: none;
      background: none;
    }

    .el-input.is-disabled .el-input__inner {
      background: none;
    }
  }
}
</style>