一个基于 elementUi 的树形下拉框，vue

2024年5月19日 454次阅读 来源: 蔚蓝

wl-vue-select

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

简介

本组件提供全选下拉框和树形下拉框功能。
wlVueSelect这是一个基于 elementUi 的 el-select 组件的二次封装的下拉框，提供了全选功能和默认选中功能；
wlTreeSelect这是一个基于 elementUi 的 el-tree 组件的二次封装的下拉框，提供了树形数据支持和默认选中功能；
因这两个需求非常普遍，所以作为一个独立插件发布。
el-select

在线访问

快速上手

npm i wl-vue-select --save

或

npm i wl-vue-select -S

使用

import wl from "wl-vue-select";`
import "wl-vue-select/lib/wl-vue-select.css"
Vue.use(wl);
    <wlVueSelect
      v-model="value"
      :props="props"
      :data="data"
      multiple
      default-select
    ></wlVueSelect>
    <p>----------分割线------------</p>
    <wlTreeSelect
      checkbox
      width="240"
      :data="treeData"
      :selected="selected"
    ></wlTreeSelect>

文档

序号参数说明类型可选值默认值
1dataoptions 可选列表数据Array––
2props配置项：显示名字的 label 字段和绑定值的 value 字段Object–{ label: “label”, value: “value” }
3showTotal当可选项大于多少个时显示全选选项Number–1
4defaultSelect是否启用默认选中,如果开启全部时选中全部，无全部时选中第一个。(开启此功能请不要给 v-model 赋初始值)Boolean–false
5其他其他 el-select 提供的参数–––
6nodeKey使用树形下拉框时，必须使用 key 来解析数据String–id
7selected使用树形下拉框时，绑定选中数据,未开启checkbox时不可使用Array类型String-Number-Array-Object––
8checkbox使用树形下拉框时,是否开启多选Boolean–false
9width使用树形下拉框时宽度,默认单位 pxString-Number–240
10leaf树形下拉框时，是否只可选叶子节点Boolean–false
11trigger树形下拉框时，触发方式Stringclick/focus/hover/manualclick

版本记录

0.3.3 修复树形下拉框开启多选时无限循环的问题，优化多选时根据
leaf字段来确定是否只返回叶子节点

0.3.2 优化树形下拉框横向超出不显示问题

0.3.0 优化树形下拉框，增加触发显示方式字段

0.2.7 优化树形下拉框单选时，可选层级，并增加leaf参数设置是否只可选择叶子节点，优化树形单选时，默认选中为object类型时的高亮效果

0.2.5 优化树形下拉框筛选算法，优化树形下拉框在可选项太长时增加滚动效果

0.2.4 修复showTotal大于data长度时，出现了empty的问题

0.2.3 更新示例

0.2.2 增加树形下拉框

0.1.2 更新算法，全选转单选时无需手动取消全选选项

0.1.0 初次发布，在基于 el-select 上增加全选和默认选中功能

    原文作者：蔚蓝
    原文地址: https://segmentfault.com/a/1190000020724211
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞