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

Posted 2023-02-21

参考技术A

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

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

attributes属性说明

事件名称

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

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

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

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

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

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