vue-element-ui-Cascader 级联选择器支持多选---折腾记

重大更新

最新版本的element已经有级联多选功能了

前沿

---

吐槽一下，程序猿最不愿听到的话之一，（人家某某网站就做出来了，你怎么做不出来，简直丧心病狂）小编最近一直在开发基于vue-elementui的pc端项目，就碰到了来自产品的这句话，都有种拿起显示器了。不过吐槽归吐槽，项目还是要写的。。。。。。在本项目中产品提的一个需求，就是人家某某网站上有的，而element-ui上没有，那就是Cascader 级联选择器，element-ui只支持单选，于是就开始了折腾，再折腾了快一周的时间吧，还是没搞出来，最后由于项目着急上线，只能暂时先放弃，所以就先搁置了，后来幸得于空，于是乎又是开始折腾，毕竟也是自己的问题。哎，不说了，show time.

该多选菜单基于 element-ui 的Cascader 层级菜单， 但是在我的一番折腾下开发出一套支持多选的，有禁用状态，以及灵活控制选几个，适应产品的奇葩需求，Cascader 层级菜单。羞于一提的是，我折腾了整整3天，才搞出来。在这里把我的心路历程记录下来,里边的注释写的个人感觉都挺全的，有不明白的也可以与我交流，共同探讨，方便后续学习与扩展。
先上个效果图

微信图片_20181012184700.png

现附上该插件的菜单配置项，以方便后期维护

attributes属性说明

属性名	描述	类型	默认值
width	菜单选择面板的宽度	String	220px
height	菜单选择面板的高度	String	240px
options	选择器菜单数据配置项	Array	[]
inputValue	选择器输入框内显示的内容	String	220px
outputType	选中项输出的字段名，outputType 用于输出选中选择项对象的某一字段， 默认值： value, 当传入 outputType 为item时， 输出选中这一项的对象(不包括 children 属性)；	String	value
disabledPair	互斥选项对儿，就是选择一个其他的就被禁用	Object	--

事件名称

事件名称	说明	回调参数
on-selected	选择器中的某一项被选中的时候触发的事件	数组，数组内包含被选中的值

options 菜单配置，就是完全按照elementui Cascader 的options的格式

属性名	描述	类型
value	选项的值	String or Number
label	选项的名称	String
checked	该选项是否被选中	Boolean
children	如果存在下一级菜单，是属于该选项的下一级选项值， 非必须	Array
multiple	是否多选	true为多选，false为单选
disabled	是否禁用	true为禁用，false为不禁用

再简单介绍一下disabledPair属性

disabledPair 用于设置禁用对， 对象形式， 接收两个属性： thisPair thatPair:

disabledPair: {
thisPair: [1], //这里的1是value的值
thatPair: [2]，
}
那么， 当值为 1 的选项被选中的时候， 值为 2 的选项将会被禁用掉， 反之亦然。但其他选项的值不会受到影响 除了传递单独的项之外， 还可以单独传入一个 all。

disabledPair: {
thisPair: [1],
thatPair: ["all"]
}

首先，先建一个公共的文件夹MulitileCascader,里边包含有三个自己封装的文件

一，index.vue 此页面为主要出口文件，会发射出一个得到选中后的item的方法以及数组。

二，MulCheckCascader.vue //此页面为基础模板，会在该页面引用递归出来的多选的item的字模板，并且该页面会接受引用页面传过来的数据，方便灵活控制尺寸，数据，是否禁用等的状态。

三，multiContent.vue 该页面为递归的所有children的Li的显示，以及选中点击事件

接下来就到需要引用的页面了。

结束语

---

这个插件到此也就完成了，终于解决了这个深坑，希望能帮助到小伙伴们，有什么不足的大家多多提出宝贵的意见，共同探讨，进步。