Element-ui封装树形下拉框

树形下拉框子组件

<template>
  <div class="box">
    <el-select ref="selectAppType" size="small" placeholder="请选择" v-model="selectValue">
      <el-option class="option-style" :label="selectLabel" :value="selectValue">
        <el-tree :data="treeData" :props="treeProps" @node-click="nodeClick"></el-tree>
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "test",
  components: {},
  props: {
    treeData: Array,
    treeProps:Object,
    selectLabel:String,
    selectValue:Number
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    nodeClick(obj, node) {
        this.$refs.selectAppType.blur();
        this.$emit("handleClick",obj.value,obj.key)
    }
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  margin: 1rem;
}
.search {
  width: calc(100% - 8px - 0.5rem);
  margin: 0 0.5rem;
}
.option-style {
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
</style>

调用组件

<template>
  <div>
    <TreeSelect
      :treeData="treeData"
      :treeProps="treeProps"
      :selectLabel="selectLabel"
      :selectValue="selectValue"
      @handleClick="handleClick"
    />
  </div>
</template>
<script>
import TreeSelect from "../components/treeSelect/index.vue";
export default {
  name: "treeSelect",
  components: {
    TreeSelect,
  },
  data() {
    return {
      treeData: [
        {
          key: 10,
          value: "物流板块0",
          parentId: 0,
          children: [
            {
              key: 3,
              value: "中通",
              parentId: 10,
              children: [
                              {
                  key: 5,
                  value: "测试类型-01",
                  parentId: 3,
                  children: [
                    {
                      key: 9,
                      value: "物流板块",
                      parentId: 5,
                      children: null,
                    },
                  ],
                },
                                {
                  key: 8,
                  value: "测试类型-02",
                  parentId: 3,
                  children: null,
                },
              ],
            },
            {
              key: 7,
              value: "圆通",
              parentId: 10,
              children: null,
            },
          ],
        },
        {
          key: 11,
          value: "FBA操作",
          parentId: 0,
          children: null,
        },
      ],
      treeProps: {
        children: "children",
        label: "value",
      },
      selectLabel: "", //下拉框显示名称
      selectValue: 0, //下拉框显示ID
    };
  },
    methods: {
    handleClick(label, value) {
      this.selectLabel = label;
      this.selectValue = value;
    },
  },
};
</script>

<style></style>