el-cascader级联选择器，选择父节点勾选子节点，取消子节点不影响父节点

1.引入vue、element-ui

	// html
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.建立一个挂载节

<div id="app"></div>

3.创建一个vue实例

new Vue({
      el: '#app',
      template: 
      `<div id="app">
        <el-cascader
		  ref="elCascader"
          v-model="checked"
          :options="options"
          :props="defaultProps"
          @change="handleChange">
        </el-cascader>
      </div>`,
      data() {
        return {
          checked: '',
          defaultProps: {
            multiple: true,
            checkStrictly: true,
          },
          options: [...] // elementui官网数据
        }
      },
      methods: {
        handleChange(val) {
          console.log(val)
        },
      },
    })

然后打开就可以运行了(可能要在服务器内运行)。这时进行选择发现打印的为父子id组成的二维数组

[
 ['zhinan', 'shejiyuanze', 'yizhi', __ob__: we],
 ['zhinan', 'shejiyuanze', 'fankui', __ob__: we]
]

设置 defaultProps 中的 emitPath 为 false，就变成了当前选择的id组成的一维数组。

['zhinan', 'shejiyuanze', 'yizhi', 'fankui', 'daohang']

看了一下文档，似乎并没有返回当前操作的id这个方法，于是手动监听checked的变化来拿到当前操作的id。

深度监听checked的变化

	// watch
      watch: {
        checked: {
          handler(newArr, oldArr) {
            const current = this.findCurrentDepartment(newArr, oldArr)
            if (!current) return
          },
          deep: true,
        },
      },
          
// methods
findCurrentDepartment(newArr, oldArr) {
    const catchNewArr = [...newArr]
    const catchOldArr = [...oldArr]
    if (catchNewArr.length > catchOldArr.length) {
        console.log('为添加')
        for (let i = 0; i < catchNewArr.length; i++) {
            const targetIndex = catchOldArr.indexOf(catchNewArr[i])
            if (targetIndex === -1) {
                return {
                    value: catchNewArr[i],
                    type: 'checked',
                }
            }
        }
    } else {
        console.log('为取消')
        for (let i = 0; i < catchOldArr.length; i++) {
            const targetIndex = catchNewArr.indexOf(catchOldArr[i])
            if (targetIndex === -1) {
                return {
                    value: catchOldArr[i],
                    type: 'cancel',
                }
            }
        }
    }
},

这样就拿到了当前操作的id、操作的类型，然后继续在watch checked里面操作。

checked: {
    handler(newArr, oldArr) {
        const current = this.findCurrentDepartment(newArr, oldArr)
        if (!current) return
        this.$nextTick(() => {
            if (current.type === 'checked') {
                // 从级联选择器中取出内部的节点数组，找到当前节点
                const targetNode = this.$refs.elCascader.checkedNodes.find((item) => {
                    return item.value === current.value
                })
                if (targetNode) {
                    // 递归找出所有子孙节点，并手动勾选
                    this.checkedChildrenDepartment([targetNode])
                    // 更新视图
                    this.$refs.elCascader.$refs.panel.calculateMultiCheckedValue()
                }
            }else if (current.type === "cancel") {
                // ....
            }
        })
    },
        deep: true,
},

这样就大功告成了。

最后，这行代码可以清除所有级联选择器的选中状态

this.$refs.elCascader.$refs.panel.clearCheckedNodes()

完整代码 https://github.com/kui913941251/el-cascader-checked