checkbox选中和不选中 jqu_el-cascader二次封装定制父子不关联的级联选择器

背景

项目公告栏可见范围选择可见部门以及可见职位时需要设计以下选择器： 1、选择父级时所有子级默认置灰、为不可选状态。 2、选中值为当前勾选框的值，不涉及子级。

如下效果图：

问题

采用的element-ui框架提供的级联选择器不能同时满足上述两种要求，需要做改造。

解决思路

element-ui v2.9.2之后，级联选择器提供了多选模式，checkStrictly属性可以严格遵守父子节点不互相关联，这可以解决问题2，element-ui支持对子级数据设置disabled属性，控制子级为不可选状态，置灰样式可以针对disabled的class定制化设计，这可以解决问题1。

解决方案

1、需要将后台返回的部门数据格式转化成element能识别的。

 transDepartmentsToElmentData(data) {
      function findChildren(children) {
        if (!children || children.length === 0) return
        for (let i = 0; i < children.length; i += 1) {
          const item = children[i]
          item.value = item.departmentId
          item.label = item.name
          if (_.isArray(item.children) && item.children.length > 0) {
            findChildren(item.children)
          }
        }
      }
      findChildren(data)
      return data
    },

2、进行选中值的所有后代进行置灰

（1）当选中的值发生变化时触发setGray(arg)方法，传递选中的值

<