前言:
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填充进来
}
中文文档:
注:
到此就结束了!有问题欢迎留言讨论