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

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
      leaf
      width="240"
      checkbox
      :data="treeData"
      @change="hindleChanged"
      v-model="selected"
    ></wlTreeSelect>

data() {
    return {
      value: [], // 选中值
      data: [
        {
          id: 1,
          name: "海边"
        },
        {
          id: 2,
          name: "森林"
        },
        {
          id: 3,
          name: "草原"
        },
        {
          id: 4,
          name: "古城"
        }
      ], // 数据
      props: {
        label: "name",
        value: "id"
      }, // 配置
      treeData: [
        {
          id: "love",
          name: "全部和你走过的风光",
          children: [
            {
              id: 1,
              name: "海边",
              children: [
                {
                  id: 5,
                  name: "蓬莱",
                }
              ]
            },
            {
              id: 2,
              name: "森林"
            },
            {
              id: 3,
              name: "草原"
            },
            {
              id: 4,
              name: "古城"
            }
          ]
        }
      ],
      selected: [ "1" ]// 树下拉框选中数据
    };
  },
  methods: {
    hindleChanged(val){
      console.log(val,2)
      console.log(this.selected)
    }
  },

文档

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

版本记录

0.3.4 修复树形下拉框el-tree默认选中字段为空，getNodes方法还能获取到上次值的问题，更新rademe示例

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 上增长全选和默认选中功能