【下拉选择树一】select选择器和tree树形控件如何实现下拉框选择树

起因

想用下拉框的形式展示树结构的数据，方便数据做分组区分

传统select选择器只能实现下拉框选择列表数据

无法实现选择树形结构的数据

开干！！

思路：把树插入到下拉框选项里面像option选项一下渲染出来，并隐藏option选项

<Select>
   <Option style="display: none;" />
   <Tree />
</Select>

实现步骤：

1. 用树结构的数据作为option选项和树的数据源
2. 把树插入到下拉框选项里面像option选项一下渲染出来，并隐藏option选项。
3. 树结构的数据平铺后成为list列表形式的数据用作渲染option选项。
4. 下拉框搜索调用下拉框的filterMethod事件获取输入框内容后，再调用树的filter方法进行筛选树节点
5. 选中树节点后，将选中值通过触发下拉框的input事件，实现下拉框选中值 隐藏的option选项和树节点来源于同一数据源（树结构的数据），树结构的数据平铺后成为list列表形式的数据用作渲染option选项。

      <el-select
        ref="iSelect"
        {...selectData}
        filterMethod={this.filterMethod}
      >
        {this.arrData.map((item) => (
          <el-option
            label={item.label}
            value={item.value}
            style="display: none;"
          />
        ))}

        <el-tree
          ref="tree"
          filter-node-method={this.filterNode}
          {...treeData}
          data={this.options}
          onCheck={this.onCheckChange}
          onCurrent-change={this.currentChange}
        ></el-tree>
      </el-select>

实现搜索树

// 监听
watch: {
    filterValue(val) {
      this.$refs.tree.filter(val)
    },
}


// 方法
filterNode(value, data) {
  if (!value) return true
    return data.label.indexOf(value) !== -1
  },
filterMethod(filterValue) {
 this.filterValue = filterValue
}

实现选中树节点，支持多选或单选

onCheckChange(...args) {
    let keys = this.$refs.tree.getCheckedKeys()
    return this.$listeners.input(keys)
 },
 currentChange(data, node) {
    if (node.isLeaf) {
      // 选父级不关闭，选叶子节点后关闭弹框
      this.$refs.iSelect?.$refs.select?.blur()
      this.$listeners.input(data.value)
    } else {
      // 父节点，不支持选中
      this.$refs.tree?.setCurrentKey(null)
    }
  }

options是树结构的数据，arrData是options扁平化后的数据 this.$listeners.input(keys)就是更新选择器的绑定值

总结

实现方式：select选择器选项位置同时插入tree树形控件，树控件的data数据和选项的数据共用，option选项设置css样式隐藏，用树节点选项代替默认的option选项，复用选择器的搜索，选中方式，实现树的搜索、选中，其实还是在操作下拉框的搜索选中。只是看不到被隐藏的选项的选中效果，而是体现到树节点上了。