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

小沐沐吖

已于 2024-05-19 10:58:54 修改

阅读量2.5k

点赞数 31

CC 4.0 BY-SA版权

文章标签： ui vue.js javascript

于 2024-05-17 20:06:44 首次发布

本文链接：https://blog.csdn.net/mu1804784474/article/details/139012238

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