element-ui 中el-select 嵌套 tree树形控

单选

<el-select class="form-input" v-model="node.name" filterable style="width: 100%;">
     <el-option style="height: auto;" :value="node">
          <el-tree
               :data="list"
               default-expand-all
               show-checkbox
               check-strictly
               :expand-on-click-node="false"
               ref="treeForm"
               node-key="code"
               @check="handleNodeCheck"
               @check-change="handleClick"
               @node-click="handleNodeClick"
               :props="props">
             </el-tree>
           </el-option>
</el-select>

list为树的数据

单选-data参数

data() {
    return {
       props: {
           children: 'children',
            label: 'name',
            value: 'code'
       },
       node: {} //选中的记录
   }
},

单选-方法

//点击节点
handleNodeClick(data) {
    this.node = data;
    this.record.parentCode = data.code;
    this.$refs.treeForm.setCheckedKeys([data.code]);
},
//节点选中状态变化
handleClick(data, checked, node){
     if(checked){
            this.node = data;
            this.record.parentCode = data.code;
            this.$refs.treeForm.setCheckedKeys([data.code]);
     } else {
            this.node = {};
            this.record.parentCode = '';
            this.$refs.treeForm.setCheckedKeys([]);
     }
},
//点击复选框
handleNodeCheck(data, checked) {
    if (checked.checkedKeys.length > 0) {
            this.node = data;
            this.record.parentCode = data.code;
            this.$refs.treeForm.setCheckedKeys([data.code]);
    }else {
            this.node = {};
            this.record.parentCode = '';
            this.$refs.treeForm.setCheckedKeys([]);
    }
}

option展开高度太小，把height设置为auto就好啦

参考地址：[https://www.jianshu.com/p/548a46c73567](https://www.jianshu.com/p/548a46c73567)

参考地址：[https://blog.csdn.net/weixin_45140661/article/details/90898558](https://blog.csdn.net/weixin_45140661/article/details/90898558)

多选

<el-select class="form-input" v-model="nodeNames" filterable style="width: 100%;">
     <el-option style="height: auto;" :value="[]">
          <el-tree
               :data="list"
               default-expand-all
               show-checkbox
               check-strictly
               :expand-on-click-node="false"
               ref="roleTree"
               node-key="code"
               @check="handleNodeCheck"
               @node-click="handleNodeClick"
               :props="props">
             </el-tree>
           </el-option>
</el-select>

多选-data参数

data() {
    return {
       props: {
           children: 'children',
            label: 'name',
            value: 'code'
       },
       nodeNames: [] //展示的数据
   }
},

多选-方法

//点击节点
handleNodeClick(data) {
    const checkKeys = this.$refs.roleTree.getCheckedKeys();
    if (checkKeys.indexOf(data.code) === -1) {
            const checkedNodes = this.$refs.roleTree.getCheckedNodes();
            checkedNodes.push(data);
            this.nodeNames = checkedNodes.map(m => {return m.name});
            this.$refs.roleTree.setCheckedNodes(checkedNodes);
    }
},
//点击复选框
handleNodeCheck(data, checked) {
     this.nodeNames = checked.checkedNodes.map(m => {return m.name});
}