一個基於 elementUi的樹形下拉框組件vue

wl-vue-select，wl-tree-select

簡介

用於vue框架的樹形下拉框及帶全選的普通下拉框。
Tree drop-down box for vue framework and ordinary drop-down box with select all.
本組件提供全選下拉框和樹形下拉框功能。
wlVueSelect這是一個基於 elementUi 的 el-select 組件的二次封裝的下拉框，提供了全選功能和默認選中功能；
wlTreeSelect這是一個基於 elementUi 的 el-tree 組件的二次封裝的下拉框，提供了樹形數據支持和默認選中功能；
因這兩個需求非常普遍，所以作爲一個獨立插件發佈。
el-select

在線訪問

主要發佈記錄

0.4.8 修復樹形下拉框，子節點全部選中時，父節點無法取消的問題

快速上手

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[廢棄]	使用樹形下拉框時，綁定選中數據【現改爲v-model 】	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
12	v-model	普通及樹形下拉框綁定值，用法與普通表單元素相同	String-Number-Array-Object	-	-
13	disabled	是否禁用下拉框	Boolean	-	false
14	nowrap	是否不允許多行顯示，true則只顯示一行	Boolean	-	false
15	noCheckedClose	多選時，是否全部取消選中時，自動關閉選項區域	Boolean	-	false
16	size	尺寸，用法同elementui	String	-	medium
17	defaultExpandAll	樹形時，是否默認展開全部選項	Boolean	-	true
18	defaultExpandedKeys	樹形時，默認展開節點keys	Array	-	-

Methods 方法

序號	name	說明	參數
1	closeOptions	關閉樹形下拉框的選項區	-

版本記錄

0.5.1 優化樹形下拉框，選項顯示過度效果

0.5.0 增加樹形樹形下拉框defaultExpandAll，defaultExpandedKeys字段

0.4.9 增加關閉樹形下拉框的選項區closeOptions方法

0.4.8 修復樹形下拉框，子節點全部選中時，父節點無法取消的問題

0.4.7 優化樹形下拉框，支持el-select的collapse-tags

0.4.6 優化樹形下拉框，使size屬性生效

0.4.5 優化樹形下拉框placeholder，增加參數管理全部取消選中時收起選項

0.4.2 優化樹形下拉框，增加是否不允許多行顯示字段

0.4.1 優化樹形下拉框，增加禁用字段

0.3.9 優化樹形下拉框默認傳進來的選中數據爲複雜型數組時，提取id；

0.3.8 修復樹形下拉框多選時，數據爲空時只清理了顯示區未清理樹chekcbox的問題

0.3.7 修改樹形下拉框單選時默然選中是否只選子節點根據leaf字段

0.3.5 修復樹形下拉框單選時的默認選擇的缺陷【綁定值爲數組時】

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 上增加全選和默認選中功能