wl vue select Download - wl vue select Source code download

wl vue select

Other categories

1.0.0

Download

wl-vue-select, wl-tree-select

Introduction

Tree drop-down box and ordinary drop-down box with all selection for vue framework.
Tree drop-down box for vue framework and ordinary drop-down box with select all.
This component provides select-all drop-down box and tree drop-down box functions.
wlVueSelect is a secondary encapsulated drop-down box based on elementUi's el-select component, which provides all-select functions and default selection functions;
wlTreeSelect is a secondary encapsulated drop-down box based on elementUi's el-tree component, which provides tree data support and default selection functions;
Because these two needs are very common, they are released as a separate plug-in.
el-select

Online access

Main release records

0.4.8 Fixed the problem that the parent node cannot be canceled when all child nodes are selected in the tree drop-down box.

Get started quickly

npm i wl-vue-select --save

or

npm i wl-vue-select -S

use

 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)
    }
  },

document

serial number	parameter	illustrate	type	Optional value	default value
1	data	options optional list data	Array	-	-
2	props	Configuration items: the label field that displays the name and the value field that binds the value	Object	-	{ label: "label", value: "value" }
3	showTotal	Display the`全选`option when there are more than a few options available	Number	-	1
4	defaultSelect[obsolete]	Whether to enable default selection, if`全部`is enabled, all will be selected, if not all, the first one will be selected. (Please do not assign an initial value to v-model when enabling this function)	Boolean	-	false
5	other	Other parameters provided by el-select	-	-	-
6	nodeKey	When using the tree drop-down box, you must use key to parse the data	String	-	ID
7	selected[obsolete]	When using the tree drop-down box, bind the selected data [now changed to v-model]	String-Number-Array-Object	-	-
8	checkbox	When using the tree drop-down box, whether to enable multi-selection	Boolean	-	false
9	width	Width when using tree drop-down box, default unit is px	String-Number	-	240
10	leaf	In a tree drop-down box, whether only leaf nodes can be selected	Boolean	-	false
11	trigger	When the tree drop-down box is used, the triggering method	String	click/focus/hover/manual	click
12	v-model	Normal and tree drop-down box binding values are used the same as ordinary form elements.	String-Number-Array-Object	-	-
13	disabled	Whether to disable the drop-down box	Boolean	-	false
14	nowrap	Whether to disallow multiple lines to be displayed. If true, only one line will be displayed.	Boolean	-	false
15	noCheckedClose	When multiple selections are made, whether to automatically close the option area when all are unselected	Boolean	-	false
16	size	Size, usage is the same as elementui	String	-	medium
17	defaultExpandAll	In tree shape, whether to expand all options by default	Boolean	-	true
18	defaultExpandedKeys	In tree shape, node keys are expanded by default.	Array	-	-
19	filterable	Whether to enable the search function (when adding a tree drop-down box, it has the same function as an ordinary drop-down box)	Boolean	-	false
20	filterFnc	In the tree shape, you can optionally customize the search logic. If not passed, the search will be based on the field corresponding to the label in the props. function(value,data)	Function	-	-
twenty one	checkStrictly	In tree shape, whether parent and child are not related	Boolean	-	false
twenty two	expandOnClickNode	In tree shape, whether clicking on a node can expand or shrink it	Boolean	-	false
twenty three	checkOnClickNode	Whether to select the node when clicking the node, the default value is false, that is, the node will only be selected when the check box is clicked	Boolean	-	false

Methods

serial number	name	illustrate	parameter
1	closeOptions	Close the option area of the tree drop-down box	-

version record

0.5.8 Added parent-child independent configuration in the tree drop-down box

0.5.5 Fixed the automatic selection logic error when the initial binding value of the tree drop-down box is a simple array; fixed the vertical centering style;

0.5.4 Fixed the problem that when all data is initially selected, each item is listed in the display area instead of displaying 'all'; the script introduction function is added.

0.5.3 Adjust the component name to big hump; add on-demand introduction

0.5.2 Optimize the tree drop-down box and add search and custom search functions

0.5.1 Optimize the tree drop-down box, and the options display excessive effects

0.5.0 Added tree drop-down box defaultExpandAll, defaultExpandedKeys fields

0.4.9 Add the closeOptions method for closing the options area of the tree drop-down box

0.4.8 Fixed the problem that the parent node cannot be canceled when all child nodes are selected in the tree drop-down box.

0.4.7 Optimize the tree drop-down box and support the collapse-tags of el-select

0.4.6 Optimize the tree drop-down box and make the size attribute effective

0.4.5 Optimize the tree drop-down box placeholder and add parameter management to close the option when all are unselected.

0.4.2 Optimize the tree drop-down box and add whether to disallow multiple rows of fields.

0.4.1 Optimize the tree drop-down box and add disabled fields

0.3.9 Optimize the tree drop-down box to extract the id by default when the selected data passed in is a complex array;

0.3.8 Fixed the problem that when the tree drop-down box is multi-selected, only the display area is cleared but the tree chekcbox is not cleared when the data is empty.

0.3.7 Modify whether to select only child nodes according to the leaf field when selecting the tree drop-down box.

0.3.5 Fixed the defect of default selection in tree drop-down box radio selection [when the bound value is an array]

0.3.4 Fixed the problem that the default selected field of the tree drop-down box el-tree is empty, and the getNodes method can also obtain the last value. Updated rademe example

0.3.3 Fixed the problem of infinite loop when multiple selection is enabled in the tree drop-down box, and optimized the leaf field to determine whether to return only leaf nodes when multiple selection is enabled.

0.3.2 Optimize the problem that the tree drop-down box does not display when it extends horizontally

0.3.0 Optimize the tree drop-down box and add a trigger display mode field

0.2.7 When optimizing the single selection of the tree drop-down box, the optional level is added, and leaf parameter is added to set whether only leaf nodes can be selected. When the single selection of the tree is optimized, the highlight effect when the object type is selected by default

0.2.5 Optimize the tree drop-down box filtering algorithm, optimize the tree drop-down box to increase the scrolling effect when the available options are too long