基于iView-Cascader的多选级联选择器:cascader-multi

前言：

iview的cascader 多级联动虽然可以实现多级联动，但是不支持多选，这里

cascader-multi 可以支持多选功能

实现效果（真实效果和他有出入，这是网上找的好看的动图）：

实现步骤：

1、安装

npm i cascader-multi --save

2、main.js引入（本来想页面按需引入，但是引入页面不显示）

import cascaderMulti from "cascader-multi";
Vue.use(cascaderMulti);

3、页面直接使用

template:

<cascaderMulti @on-change="onchange" :data="end_codes" multiple></cascaderMulti>

data:（取自官网）

end_codes:[{value: 'beijing',label: '北京',children: [{value: 'gugong',label: '故宫'},{value: 'tiantan',label: '天坛'},{value: 'wangfujing',label: '王府井'}]}, {value: 'jiangsu',label: '江苏',children: [{value: 'nanjing',label: '南京',children: [{value: 'fuzimiao',label: '夫子庙',}]},{value: 'suzhou',label: '苏州',children: [{value: 'zhuozhengyuan',label: '拙政园',},{value: 'shizilin',label: '狮子林',}]}],}
]

methods:

onchange(data){//打印 data,得到一个数组，不管是几级的都会把value填充进来
}

中文文档：

注：

到此就结束了！有问题欢迎留言讨论

基于iView-Cascader的多选级联选择器:cascader-multi相关推荐

iView级联选择器Cascader回显慢的问题
简单小结一下,iView在日常开发中所遇到的一点小问题, 今日简单聊聊iView级联选择器Cascader的使用心得: [参考资料:iView ] 1.存在问题: Cascader选择器在回显数据时会 ...
element-UI级联选择器(Cascader)获取label值 - 代码篇
element-ui级联选择器(Cascader)获取级联对象 :主要是想获取:label值.value值效果图预览: 代码参考如下: <el-cascaderref="cascad ...
element-UI级联选择器(Cascader 回显、默认显示项) - （返回结果的）格式转化 - 代码篇
el-cascader组件 :(返回结果的)格式转化有时候会报错:TypeError: thsAreaCode.replace is not a function (bug截图如下) 说白了就是该组 ...
Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...
elementui级联选择器Cascader不触发change事件
使用级联选择器时,需求是选择最后一级,同时选择之前的父级标签,看这个需求明明很简单,人家自带的组件就是这样,但是却一直无法触发绑定的change事件,只有添加props.checkStrictly = ...
关于级联选择器Cascader数据太多会改变列表大小的问题
1.打开后台控制台中的---元素栏,通过做左侧的标志找到级联选择器的部分 2.然后你在筛选器--element-style{}中输入 max-height:400px(你自己觉得最合适的高度)看看页面 ...
elementui级联选择器
element-ui 级联选择器 Cascader 选择任意一级选项去掉圆圈和点击label标签可选,选择完之后下拉框自动回收解决方法: 1. 这样的话效果是实现了,但是存在两个问题: 1.只能点击 ...
Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法有两种触发子菜单的方式只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
解决cascader级联选择器报错“level“ of null
1. 需求:级联选择器数据与另一文本框有联系,如果文本框有值,则相同的值在cascader的数据中置灰,不可选.如果先选择了cascader的值,再填文本框的值发现两选值相同,则将cascader的选 ...

基于iView-Cascader的多选级联选择器:cascader-multi

前言：

iview的cascader 多级联动虽然可以实现多级联动，但是不支持多选，这里

cascader-multi 可以支持多选功能

实现效果（真实效果和他有出入，这是网上找的好看的动图）：

实现步骤：

1、安装

2、main.js引入（本来想页面按需引入，但是引入页面不显示）

3、页面直接使用

注：

到此就结束了！有问题欢迎留言讨论

基于iView-Cascader的多选级联选择器:cascader-multi相关推荐

最新文章

热门文章