【开发】【element-ui】实现 树状节点下拉选择器 组件的简单思路

利用el-select和el-tree组合使用实现 树状节点下拉选择器 的基础组件Demo
因为比较简单，直接上代码，相关解释在代码注释里。

效果图

HTML

<template>
  <div>
    <el-select ref="selectRef" v-model="selectValue" size="mini" :style="width ? `width:${width}` : ''">
      <!-- 搜索 -->
      <el-input v-model="filterText" placeholder="搜索已显示过的节点" clearable />
      <!-- 节点树 -->
      <el-option style="height: 100%; padding: 0;" value="">
        <el-tree
          ref="treeRef"
          class="main-select-el-tree"
          :data="treeData"
          :props="treeProps"
          :expand-on-click-node="expandOnClickNode"
          :filter-node-method="filterNode"
          :load="loadNode"
          lazy
          highlight-current
          accordion
          style="font-weight: normal;"
          @node-click="handleNodeClick" />
      </el-option>
    </el-select>
  </div>
</template>

JavaScript

<script>
export default {
  name: 'ObjectSchemaSelect',
  props: {
    width: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 输入框绑定值
      selectValue: '',
      // 当前选中 - 节点值
      nowNode: '',
      // 当前选中 - 节点父值
      nowNodeParent: '',
      // 搜索框绑定值
      filterText: '',
      // tree - 配置
      expandOnClickNode: true,
      treeProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
      treeData: []
    }
  },
  watch: {
    // 树 - 搜索
    filterText(val) {
      this.$refs.treeRef.filter(val)
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // tree - node-click
    handleNodeClick(node) {
      // TODO 后续可改造 跳过一级节点
      if (node && node.level !== 1) {
        this.nowNode = node.label || '-'
        this.nowNodeParent = node.parent || '-'
        this.selectValue = `${this.nowNodeParent}/${this.nowNode}`
        this.$refs.selectRef.blur()
      }
    },
    // tree - filter-node-method
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // tree - load
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve(this.treeData)
      } else {
        const data = [{ label: '二级A-1', leaf: true, parent: '一级A' }]
        setTimeout(() => { resolve(data) }, 500)
      }
    },
    // getData
    getData() {
      const data = [
        { label: '一级A', level: 1 },
        { label: '一级B', level: 1, children: [{ label: '二级B-1', leaf: true, parent: '一级B' }] }
      ]
      setTimeout(() => { this.treeData = data }, 500)
    }
  }
}
</script>

CSS

<style lang="scss" scoped>
::v-deep .main-select-el-tree .el-tree-node .is-current>.el-tree-node__content {
  font-weight: bold;
  color: $--color-blue;
}

::v-deep .main-select-el-tree .el-tree-node.is-current>.el-tree-node__content {
  font-weight: bold;
  color: $--color-blue;
}
</style>