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

Posted 2022-03-07 孔子-说

目录

1、了解Element-UI

2、安装ElementUI

2.1 通过 vue-cli创建vue项目

2.2 安装 element-ui组件

2.3 配置main.js文件

2.3.1 方式一：引入所有element-ui组件

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

3、Vue页面实现树型列表

3.1 template部分

3.2 data部分

3.3 方法部分

4、实现效果

---

1、了解Element-UI

Element UI是“饿了么”前端出品的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

• 基于Vue 2.x的官网地址：https://element.eleme.cn/#/zh-CN
• 基于Vue 3.x的官网地址：https://element-plus.gitee.io/zh-CN

2、安装ElementUI

2.1 通过 vue-cli创建vue项目

2.2 安装 element-ui组件

进入到项目文件夹，执行加载element-ui组件命令：

npm i element-ui

2.3 配置main.js文件

2.3.1 方式一：引入所有element-ui组件

 /* 导入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、实现效果