基于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填充进来
}

中文文档：

注：

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