Element-UI封装El-Select-Tree组件(树形下拉选择器)

Element-UI

1、封装Select-Tree组件

1.1、代码实现

el-select-tree/index.js

import SelectTree from "./select-tree.vue";

/* istanbul ignore next */
SelectTree.install = function (Vue) {
   
   
  Vue.component(SelectTree.name, SelectTree);
};

export {
   
    SelectTree };

el-select-tree/select-tree.vue

<template>
  <el-select
    :disabled="disabled"
    :size="size"
    :clearable="clearable"
    :placeholder="placeholder"
    :no-data-text="noDataText"
    :popper-class="popperClass"
    :popper-append-to-body="popperAppendToBody"
    :multiple="multiple"
    :value="value"
    @visible-change="handleVisibleChange"
    @remove-tag="handleRemoveTag"
    @clear="handleClear"
    ref="selectRef"
  >
    <el-option
      v-if="data.length !== 0"
      value=""
      style="display: none"
    ></el-option>

    <template v-if="value">
      <el-option
        :value="item[nodeKey]"
        :label="item[props?.label ?? 'label']"
        style="display: none"
        :key="item[nodeKey]"
        v-for="item in optionData"
      ></el-option>
    </template>

    <el-tree
      :node-key