基于element的树选择组件

尼克_张

已于 2022-10-26 17:08:18 修改

阅读量583

点赞数

分类专栏：组件库文章标签： vue elementui

于 2022-03-31 19:21:31 首次发布

本文链接：https://blog.csdn.net/m0_48076809/article/details/123880909

版权

本文介绍如何通过结合Element UI的Popover、Tree和Select组件，自定义实现一个树形选择组件。该组件具备单选、多选、清空和预设选中项的功能。

摘要由CSDN通过智能技术生成

由于element中没有树选择组件，但popover可以利用分发取代content属性，所以自己利用popover，tree，select等组件改造成为树选择组件，该组件支持单选，多选，清空和默认选中项。

在这里插入图片描述

<template>
  <div>
    <el-popover
      placement="bottom-start"
      :width="width"
      @hide="popoverHide"
      :append-to-body="false"
      popper-class="myPopover"
    >
      <el-tree
        class="common-tree"
        :style="{ height: height + 'px' }"
        ref="tree"
        :data="data"
        :props="defaultProps"
        :show-checkbox="multiple"
        :node-key="nodeKey"
        :check-strictly="checkStrictly"
        default-expand-all
        :expand-on-click-node="false"
        :default-checked-keys="defaultCheckKeys"
        :highlight-current="true"
        @node-click="handleNodeClick"
        @check-change="handleCheckChange"
      ></el-tree>
      <el-select
        :style="{ width: width + 'px' }"
        slot="reference"
        v-model="selectedData"
        :multiple="multiple"
        clearable
        collapse-tags
        :popper-append-to-body="false"
        popper-class="myPopper"
      >
        <el-option v-for="item in options" :key="item.value"