element 下拉树

html

       <el-form-item label="选择公司">
          <div class="select-tree">
            <el-select 
              v-model="searchForms.id" 
              placeholder="请选择"  
              ref="selectTree"
              :popper-append-to-body="false"
            >
              <el-option 
                :value="searchForms.id" 
                :label="searchForms.companyName"
                >
                  <el-tree
                    node-key="id"
                    :data="treeData"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  ></el-tree>
              </el-option>

            </el-select>
          </div>
        </el-form-item>

data

      defaultProps: {
        children: 'children',
        label: 'companyName'
      },
      treeData:[],        // 这里的数据结构参考element树型控件的data格式
      searchForms: {      // 使用组件 v-model绑定的集合
        id:'',            // 所属法人单位
        companyName:'',   // 所属法人单位名称
        sealId:'',        // 印章id
      },

methods

    // 公司下拉树 - 点击node
    handleNodeClick(node){
      console.log(node,'node')
      this.searchForms.id = node.id
      this.searchForms.companyName = node.companyName
      this.$refs.selectTree.blur()
    },

修改样式问题

  .select-tree{
    /deep/ .el-select-dropdown__item{
      height:270px;
      padding: 1px 0;
      overflow-y: auto;
      background-color:#fff;
    }
    /deep/ .el-tree-node__label{
      font-weight: 400;
    }
  }

参考博客并修改了样式bug问题: https://blog.csdn.net/zhongmei121/article/details/88874528