树形选择器小组件（element-ui）

<template>
  <div class="hello">
    <el-select
      class="main-select-tree"
      ref="selectTree"
      v-model="selectValue"
    >
      <el-option
        v-for="item in optionData(options_D)"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        style="display: none"
      />

      <el-tree
        class="main-select-el-tree"
        ref="selectelTree"
        :data="options_D"
        :props="treeProps"
        highlight-current
        @node-click="handleNodeClick"
        :expand-on-click-node="expandOnClickNode"
        default-expand-all
      />
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      expandOnClickNode: true,
      selectValue: '',
      treeProps: {
        children: 'children',
        label: 'name',
      },
      options_D: [
        {
          id: 1,
          name: 'test1',
          children: [
            {
              id: 11,
              name: 'test1-1',
              children: [
                {
                  id: 111,
                  name: 'test1-1-1',
                  children: [],
                },
                {
                  id: 112,
                  name: 'test1-1-2',
                  children: [],
                },
              ],
            },
            {
              id: 21,
              name: 'test2-1',
              children: [
                {
                  id: 111,
                  name: 'test2-1-1',
                  children: [],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleNodeClick(node) {
      this.selectValue = node.name;
      // this.ruleForm.deptId = node.id;
      this.$refs.selectTree.blur();
    },
    optionData(array, result = []) {
      array.forEach((item) => {
        result.push({ label: item.name, value: item.id });
        if (item.children && item.children.length !== 0) {
          this.optionData(item.children, result);
        }
      });
      return JSON.parse(JSON.stringify(result));
    },
  },
};
</script>

<style scoped></style>