Vue实现树形下拉菜单

是点击完数据后，下拉菜单收回。handleNodeClickBySearch是用作点击树形结构参数的触发事件。filterRuleTree和treeFilterNode是用作菜单的查询操作。基于vue生成树形下拉菜单，结合el-select和el-tree来实现。做个记录吧，避免后续遇到问题一时间又得查文档。searchForm是我的查询参数。下面讲解下具体方法是做什么的。treeList是数据信

dexi.Chi 程序猿

5601人浏览 · 2022-08-26 14:52:28

dexi.Chi 程序猿 · 2022-08-26 14:52:28 发布

基于vue生成树形下拉菜单，结合el-select和el-tree来实现。
做个记录吧，避免后续遇到问题一时间又得查文档
实现效果
在这里插入图片描述

下面是代码
vue：

<el-select filterable :filter-method="(value) => filterRuleTree(value)" clearable v-model="searchForm.componentsName" placeholder="请选择" size="small" ref="addTreeBySearch">
  <el-option
    :value="selectTree"
  >
  <el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClickBySearch" ref="dataTree" :filter-node-method="treeFilterNode"></el-tree>
  </el-option>
</el-select>

js:

<script>
  export default {
    data() {
      return {
    selectTree: [],
    searchForm: {
      componentsName: '', //组件名称
      componentsCode: '', //组件编码
    },
        treeList: : [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
    filterRuleTree(data) {
      if (data !== undefined) {
        this.$refs['dataTree'].filter(data);
      }
    },
    treeFilterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //搜索框点击树
    handleNodeClickBySearch(data) {
      this.searchForm.componentsCode = data.value;
      this.searchForm.componentsName = data.label;
      this.$refs.addTreeBySearch.blur();
    },
    }
  };
</script>

下面讲解下具体方法是做什么的
handleNodeClickBySearch是用作点击树形结构参数的触发事件。
this.$refs.addTreeBySearch.blur();是点击完数据后，下拉菜单收回。
filterRuleTree和treeFilterNode是用作菜单的查询操作。
treeList是数据信息。
selectTree目前没用上可用可不用，自己试试
searchForm是我的查询参数