wl vue select下載 - wl vue select原始碼下載

wl vue select

其他類別

1.0.0

下載

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	-	-
19	filterable	是否開啟搜尋功能(增加樹狀下拉時，和普通下拉框一樣的功能)	Boolean	-	false
20	filterFnc	樹形時，選用自訂搜尋邏輯，不傳則依props內的label對應的欄位搜尋。 function(value,data)	Function	-	-
21	checkStrictly	樹形時，是否父子不關聯	Boolean	-	false
22	expandOnClickNode	樹形時，是否點選節點能展開收縮	Boolean	-	false
23	checkOnClickNode	是否在點擊節點的時候選取節點，預設值為false，也就是只有在點擊複選框時才會選取節點	Boolean	-	false