一個基於 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 上增長全選和默認選中功能