 /* 导入element-ui样式
 */
 import 'element-ui/lib/theme-chalk/index.css'
 
 import Vue from 'vue'
 
 /* element-ui所有组件
 */
 import Element from 'element-ui'
 Vue.use(Element)

2.3.2 方式二：按需引入element-ui组件

方式一是引入所有的element-ui组件，也可以按以下方法按需引入组件。

1）在 src 文件夹中新建 element 文件夹，并在里面新建一个 index.js 文件

2）在index文件中去书写我们需要引入的部分组件

// 导入自己需要的组件
import  Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col  from 'element-ui'
const element = 
  install: function (Vue) 
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(OptionGroup)
    Vue.use(Input)
    Vue.use(Tree)
    Vue.use(Dialog)
    Vue.use(Row)
    Vue.use(Col)
  

export default element

注意：要使用 Select 组件，必须同时使用 Option 和 OptionGroup

3）在 main.js 中使用该文件。

// css样式还是需要全部引入
import 'element-ui/lib/theme-chalk/index.css'
import element from './element/index'
Vue.use(element)

3、Vue页面实现树型列表

页面操作：选择框展示后端传来的树状结构数据，可下拉，选中节点显示在输入框下拉菜单消失。

在Vue页面中需要编写以下三部分代码。

3.1 template部分

<template>
  <div>
    <el-select
      // ref属性注册，用于在vue中操作dom元素
      ref="selectTree"
      v-model="treeData"
      placeholder="请选择...">
      <el-option
        :value="categoryId"
        style="height: auto"
      >
        <el-tree
           ref="tree"
           :data="categoryOptions"
           default-expand-all
           node-key="categoryId"
           empty-text="无匹配数据"
           :props="defaultProps"
           highlight-current
           @node-click="handleNodeClick"
         />
      </el-option>
    </el-select>
  </div>
</template>

3.2 data部分

data() 
    return 
      categoryId:null,
      //分类
      categoryOptions: [],
      // 树型数据
      treeData: "",
      data: [
          
              id: 1,
              name: "一级 1",
              children: [
                  
                      id: 4,
                      name: "一级 1-1",
                  ,
              ],
          ,
      ],
      defaultProps: 
        /** 唯一标识 **/
        value: 'categoryId',
        /** 标签显示 **/
        label: 'categoryName',
        /** 子级 **/
        children: "children",
        /** 是否禁用 **/
        disabled: function(data,node)
            if(data.isLeaf==1)
                return false;
            else
                return true;
            
        
      
    ;
  ,

注：例子展示的数据是后端传来的树结构categoryOptions，注意初始化。如果想要展示静态数据，改为data即可。

3.3 方法部分

mounted() 
      this.loadCategoryList();
      this.loadDataSet();
      this.echoDataSet(this.formData);
,
methods: 
  //节点点击事件
  handleNodeClick(data,node,nodeData)
      if(data.isLeaf==1)
          this.treeData= data.categoryName;
          this.categoryId= data.categoryId;
          // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
          this.$refs.selectTree.blur();
      
  ,

  // 初始化列表
  async loadCategoryList() 
      const  code, data  = await getCategoryList("module");
      if(this.categoryId != null) 
          this.treeData = data.filter(
            el => this.categoryId == el.categoryId
          )[0].categoryName;
      
      this.categoryOptions = this.handleTree(data, "categoryId", "pid");
      if (code != "200") return;
  ,

  // 数据集回显
  echoDataSet(val) 
      if (!val) return;
      const code = val.setCode;
      const categoryId = val.categoryId||'';
      this.categoryId = categoryId;
      await this.loadCategoryList();
      this.$refs.tree.setCurrentKey(categoryId); // 设置节点高亮

4、实现效果

以上是关于element-ui中el-select与el-tree的结合使用实现下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章

element-ui中el-select与el-tree的结合使用实现下拉菜单

Element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案