在遇到省市区多级联动数据的时候，经常会用到的就是 a-cascader级联选择器。

1.级联选择器的使用方法

1.1 需要指定数据源——`options` 数据结构是对象数组嵌套——`value/label/children`

<a-cascader :options="options" placeholder="Please select" @change="onChange" />

数据源结构如下：

var options = [{value: 'zhejiang',label: '浙江',children: [{value: 'hangzhou',label: '杭州',children: [{value: 'xihu',label: '西湖',},],},],},
]

1.2 默认是选中最后一级才能算选中，可以通过添加`change-on-select`改为任意选中一级

<a-cascader :options="options" change-on-select @change="onChange" />

1.3 绑定的是一个数组，无论是否选中任意一级还是最后一级，结果都是数组

1.4 可以添加`:show-search="{ filter }"`来实现检索筛选功能

<a-cascader:options="options":show-search="{ filter }"placeholder="Please select"@change="onChange"/>

过滤方法如下：

filter(inputValue, path) {return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
},

1.5 如果数据源的字段名非`value/label/children`，可以通过`fieldNames`来指定其他参数

<a-cascader:field-names="{ label: 'name', value: 'code', children: 'items' }":options="options"placeholder="Please select"@change="onChange"/>

此时支持的数据源可以是下面的形式了

var options = [{code: 'zhejiang',name: '浙江',items: [{code: 'hangzhou',name: '杭州',items: [{code: 'xihu',name: '西湖',},],},],},
]

2.树形选择控件的使用方法

2.1 需要指定数据源——`treeData` 数据结构是对象数组嵌套——`title/value/key/children`

<a-tree-selectv-model="value"style="width: 100%":tree-data="treeData"show-search:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"placeholder="Please select"allow-cleartree-default-expand-all/>

数据源结构如下：

var treeData = [{title: 'Node1',value: '0-0',key: '0-0',children: [{title: 'Child Node1',value: '0-0-0',key: '0-0-0',},],},
]

2.2 默认是选中任意一级

2.3 绑定的是一个字符串，如果设置成了`multiple`多选，则绑定的值是一个字符串的数组

 <a-tree-selectshow-searchstyle="width: 100%":value="value":dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"placeholder="Please select":tree-data="treeData"allow-clearmultipletree-default-expand-all/>

2.4 可以添加`:show-search="{ filter }"`来实现检索筛选功能

<a-cascader:options="options":show-search="{ filter }"placeholder="Please select"@change="onChange"/>

过滤方法如下：

filter(inputValue, path) {return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
},

3. 如果想要多选或者绑定的结果是单个值，而非数组，则优先选择树形选择控件，因为回显会简单。

4. 如果是必须要选中最后一级才可以，则选择级联选择器，回显的时候需要给出一个数组，如果参数没有给出，则需要自行处理，将前面几级的value也一并存放到数组中才可以。

完成！！！

antd——a-tree-select 树形选择控件与 a-cascader 级联选择器的对比——技能提升相关推荐

html ui 下拉列表,Atitit.ui控件-下拉菜单选择控件的实现select html_html/css_WEB-ITnose...
Atitit.ui控件---下拉菜单选择控件的实现select html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& mod ...
ExtJS6.0扩展日期选择控件为也可以选择时间
PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6. ...
部门选择控件源代码公布
为了答谢大家对无须迭代两个循环完成树结构构建的支持特公布这两天新写的部门选择控件源代码,该控件最早是用一个用户控件实现数据调用采用Linq界面采用AtlasControlToolkit PopupCo ...
选择控件— UI组件系列
重点 (Top highlight) The word "toggle" is a reference to a switch with a short handle that a ...
PyQt5树形结构控件QTreeWidget操作
QTreeWidget 类根据预设的模型提供树形显示控件. QTreeWidget 使用类似于 QListView 类的方式提供一种典型的基于 item 的树形交互方法类,该类基于QT的"模 ...
javascript 打造城市选择控件，兼容IE6以及以上，谷歌，Firefox
在淘宝旅行上看到的城市选择效果,感觉还不错,就自己的理解重新实现一遍,先看效果,然后再细说实现原理,支持鼠标上下键选择城市,支持直接输入城市名称,拼音首字母,全拼,支持IE6遮盖SELECT,压缩后1 ...
html+lt;input+file样式,不同内核的浏览器中文件选择控件的外观也不相同
标准参考根据 W3C HTML4.01 规范中的描述,type 属性为 "file" 的 INPUT 元素在浏览器中将被渲染为一个文件选择控件(file select),这种控件 ...
jQuery - 通过文本描述设置选择控件的选定值
本文翻译自:jQuery - setting the selected value of a select control via its text description I have a sele ...
四种常见的浏览器内核简介----JS城市选择控件
一四种常见的浏览器内核简介 Gecko: Gecko: Netscape6开始采用的内核,后来的Mozilla FireFox (火狐浏览器) 也采用了该内核,Gecko的特点是代码完全公开,因此, ...

antd——a-tree-select 树形选择控件与 a-cascader 级联选择器的对比——技能提升

1.级联选择器的使用方法

1.1 需要指定数据源——`options` 数据结构是对象数组嵌套——`value/label/children`

1.2 默认是选中最后一级才能算选中，可以通过添加`change-on-select`改为任意选中一级

1.3 绑定的是一个数组，无论是否选中任意一级还是最后一级，结果都是数组

1.4 可以添加`:show-search="{ filter }"`来实现检索筛选功能

1.5 如果数据源的字段名非`value/label/children`，可以通过`fieldNames`来指定其他参数

2.树形选择控件的使用方法

2.1 需要指定数据源——`treeData` 数据结构是对象数组嵌套——`title/value/key/children`

2.2 默认是选中任意一级

2.3 绑定的是一个字符串，如果设置成了`multiple`多选，则绑定的值是一个字符串的数组

2.4 可以添加`:show-search="{ filter }"`来实现检索筛选功能

3. 如果想要多选或者绑定的结果是单个值，而非数组，则优先选择树形选择控件，因为回显会简单。

4. 如果是必须要选中最后一级才可以，则选择级联选择器，回显的时候需要给出一个数组，如果参数没有给出，则需要自行处理，将前面几级的value也一并存放到数组中才可以。

antd——a-tree-select 树形选择控件与 a-cascader 级联选择器的对比——技能提升相关推荐

最新文章

热门文章

antd——a-tree-select 树形选择控件 与 a-cascader 级联选择器 的对比——技能提升

1.级联选择器的使用方法

1.1 需要指定数据源——options 数据结构是 对象数组嵌套——value/label/children

1.2 默认是选中最后一级才能算选中，可以通过添加change-on-select改为任意选中一级

1.3 绑定的是一个数组，无论是否选中任意一级还是最后一级，结果都是数组

1.4 可以添加:show-search="{ filter }"来实现检索筛选功能

1.5 如果数据源的字段名非value/label/children，可以通过fieldNames来指定其他参数

2.树形选择控件的使用方法

2.1 需要指定数据源——treeData 数据结构是 对象数组嵌套——title/value/key/children

2.2 默认是选中任意一级

2.3 绑定的是一个字符串，如果设置成了multiple多选，则绑定的值是一个字符串的数组

2.4 可以添加:show-search="{ filter }"来实现检索筛选功能

3. 如果想要多选或者绑定的结果是单个值，而非数组，则优先选择树形选择控件，因为回显会简单。

4. 如果是必须要选中最后一级才可以，则选择级联选择器，回显的时候需要给出一个数组，如果参数没有给出，则需要自行处理，将前面几级的value也一并存放到数组中才可以。

antd——a-tree-select 树形选择控件 与 a-cascader 级联选择器 的对比——技能提升相关推荐

最新文章

热门文章

antd——a-tree-select 树形选择控件与 a-cascader 级联选择器的对比——技能提升

1.1 需要指定数据源——`options` 数据结构是对象数组嵌套——`value/label/children`

1.2 默认是选中最后一级才能算选中，可以通过添加`change-on-select`改为任意选中一级

1.4 可以添加`:show-search="{ filter }"`来实现检索筛选功能

1.5 如果数据源的字段名非`value/label/children`，可以通过`fieldNames`来指定其他参数

2.1 需要指定数据源——`treeData` 数据结构是对象数组嵌套——`title/value/key/children`

2.3 绑定的是一个字符串，如果设置成了`multiple`多选，则绑定的值是一个字符串的数组

2.4 可以添加`:show-search="{ filter }"`来实现检索筛选功能

antd——a-tree-select 树形选择控件与 a-cascader 级联选择器的对比——技能提升相关推荐