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

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

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

attributes属性说明

事件名称

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

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

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

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

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

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

minit－ui和element－ui，前者是移动端，后者是PC端，结合Vue功能不错，就是UI组件不是很强大，可以满足一般的需求。

所以element－ui不适合移动端。

element－ui的需求：丰富的feature：丰富的组件，自定义主题，国际化。文档 & demo：提供友好的文档和 demo，维护成本小，支持多语言。安装 & 引入：支持 npm 方式和 cdn 方式，并支持按需引入。工程化：开发，测试，构建，部署，持续集成。

作为一个基础组件库，还有一个很重要的方面就是组件种类丰富。element－ui官方目前有55个组件，分成了6大类，分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其它类型组件。这些丰富的基础组件能很好地满足大部分PC端toB业务开发需求。

element－ui的组件源码在packages目录里维护，而并不在src目录中，这么做的目的猜测是为了让每个组件可以单独打包，支持按需引入。

但实际上想达到这个目的也并不一定需要这么去组织维护代码，更推荐把组件库中的组件代码放在src／components目录中维护，然后通过修改webpack配置脚本也可以做到每个组件单独打包以及支持按需引入，源码放在src目录总是更合理的。

扩展资料：

element－ui组件的样式、公共样式都在packages／theme－chalk文件中，并且它是可以独立发布的。element－ui组件样式中的颜色、字体、线条等等样式都是通过变量的方式引入的。

在packages／theme－chalk／src／common／var．scss中我们可以看到这些变量的定义，这样就给做多主题提供了方便，因为我只要修改这些变量，就可以实现组件的主题改变。

updateVarible是一个POST请求，他会把你修改的的主题配置提交到后端server，提交的数据你可以自己去查看它的RequestPayload，这个POST请求会返回一段CSS文本，然后会动态插入到head标签的底部，来覆盖默认样式。

可以通过审查元素看到head底部会动态插入一个id为chalk－style的标签。

参考资料：

百度百科-UI设计

Bootstrap(经典)

2Vue(灵活高效的JS框架)

3React(组件开发)

4 angular(web应用开发框架)

5typescript(功能强大，语法简洁, JS的扩展)

6Element (快速搭建一个优雅的网站)

7webpack & parcel (应用打包工具)

8webassembly(模块编程，四大浏览器联袂支持)

9Layui(模块化UI组件)

10PWA(Google推出的网页应用开发)

---