vue el-select的下拉树形结构 带检索功能

el-select的下拉框内容改造成树结构

<template>
  <div>
    <el-select
      class="undergroundMap_top_select"
      v-model="filter.keyword"
      clearable
      placeholder="请选择"
      @clear="handleClear"
      @focus="blurInput"
      ref="treeSelect"
      filterable
      :filter-method="filterMethod"
    >
      <el-option
        hidden
        key="upResId"
        :value="filter.keyword"
        :label="filter.upResName"
      >
      </el-option>
      <el-tree
        :data="treeData"
        node-ket="nodeId"
        :props="defaultProps"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        @node-click="handleNodeClick"
        ref="selecteltree"
        :filter-node-method="filterNode"
      >
        <span
          class="custom-tree-node"
          :title="node.label"
          slot-scope="{ node, data }"
        >
          <span :class="filter.keyword == data.nodeId ? 'name_active' : ''">
            {{ data.nodeName }}
          </span>
        </span>
      </el-tree>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "nodeName",
      },
      treeData: [
        {
          nodeId: 1,
          nodeName: "节点1",
          children: [
            {
              nodeId: 11,
              nodeName: "节点1-1",
            },
            {
              nodeId: 12,
              nodeName: "节点1-2",
              children: [
                {
                  nodeId: 121,
                  nodeName: "节点1-2-1",
                },
                {
                  nodeId: 122,
                  nodeName: "节点1-2-2",
                },
              ],
            },
          ],
        },
      ],
      filter: {
        keyword: "",
        upResName: "",
      },
    };
  },
  methods: {
    filterMethod(value) {
      this.$refs["selecteltree"].filter(value.trim());
    },
    blurInput() {
      this.$refs["selecteltree"].filter("");
    },
    filterNode(value, data, node) {
      if (!value) return true;
      let parentNode = node.parent,
        labels = [node.label],
        level = 1;
      while (level < node.level) {
        labels = [...labels, parentNode.label];
        parentNode = parentNode.parent;
        level++;
      }
      return labels.some((label) => label.indexOf(value) !== -1);
      // if (data.video_code) return data.catalog_name.indexOf(value) !== -1;
    },
    // 节点点击事件
    handleNodeClick(data) {
      console.log("选择", data);
      this.filter.upResName = data.nodeName;
      this.filter.keyword = data.nodeId;
      this.$refs.treeSelect.blur(); // 失去焦点 隐藏下拉
    },
    // 选择器配置可以清空选项，用户点击清空按钮时触发
    handleClear() {
      this.filter.upResName = "";
      this.filter.keyword = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.name_active {
  color: #358efe;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124