Vue element-ui el-cascader 只能末级多选问题_vue.js_

element-ui el-cascader只能末级多选

像这样的需求我们直接可以用css完成

/deep/.el-cascader-panel:first-child .el-checkbox{ display:none; }

扩展实现element-ui中el-cascader全选功能

重所周知，element-ui中的cascader中，没有对所有子节点的全选功能。

近期，公司项目有一个功能是，如果点击了全选，则选中所有子节点的功能；如果在全选状态下，取消了任意一个节点，则移除该节点和全部节点；如果在全选状态下，又点击了全选，则完成全不选的操作，即实现效果如下

图1.1： 从【选中部分节点】（或【所有节点都没有选择】） 到【全选】的实现效果

图1.2 从【已选中全部节点】状态到【取消任意一个节点】效果图

图1.3 全不选效果图（在【全选】状态下再次点击【全选】按钮，或挨个取消已选中节点）

实现思路如下

【Ⅰ】返回数据格式

1. 如果是只有一层字节点，他的数据返回格式应是[节点1， 节点2, .....]

2. 如果含有多层节点，他的数据返回格式应该是[ [父节点，子节点，孙子节点...], [父节点，子节点，孙子节点...] ]，这种数据返回格式，可以很清晰的看到各个节点所处的层次结构

【2】全选实现方式

1. 全选状态：包含了所有节点，因为数据结构层次的不确定，可以大致分为两种：

第一种，单层结构，对于全选实现方式很简单，通过更改绑定的数据源，加入所有节点即可；

第二种，多层结构，对于这种数据结构，我们采用递归的方式（不确定是2层，3层.还是更多），首先我们创建一个临时数据，用于保存根节点到各个子节点中所有节点的value值，对于如图所示的11号节点和8号节点，那我们应该保存的值为[ [1, 3, 7, 11], [1, 3, 8] ]

 2. 全不选状态：

• 对于这个状态比较简单，将数组清空即可

3. 从全选状态到取消任意一个节点状态：

• 对于这个状态，删除【全选】所对应的节点和删除本次要移除的节点即可

组件源码奉上

使用方法

// 多层结构,带全部  // 单层结构，带全部  // 注：如果不需要配置全部节点则直接使用element提供的cascader即可 // 本组件只考虑第一层带有全部的情况，且全部节点不带有children属性，即只有一层，若除第一层节点外其他层次节点带有全部选项，则勾选本层次的上一层节点即可

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！