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

解决方案

<template>
//子组件,里面是el-cascader
    <department-cascader
         ref="department"
         v-model="formData.department"
         class="w100"
         clearable
         placeholder="请选择部门"
         :props="{ multiple: true }"
         @handleChange="handleChangeDepartment"
     />
</template>
<script>
export default {
  watch: {
    'formData.department': {
      handler(newArr, oldArr) {
        const current = this.findCurrentDepartment(newArr, oldArr)
        if (!current) return
        this.$nextTick(() => {
          if (current.type === 'checked') {
            // 从级联选择器中取出内部的节点数组,找到当前节点
            const targetNode = this.$refs.department.$refs.departmentCascader.checkedNodes.find((item) => {
              return item.value === current.value
            })
            if (targetNode) {
              // 递归找出所有子孙节点,并手动勾选
              this.checkedChildrenDepartment([targetNode])
              // 更新视图
              this.$refs.department.$refs.departmentCascader.$refs.panel.calculateMultiCheckedValue()
            }
          }
          // else if (current.type === "cancel") {
          //   // ....
          // }
        })
      },
      deep: true
    }
  },
  methods: {
    checkedChildrenDepartment(list = []) {
      list.forEach((item) => {
        item.doCheck(true)
        if (item.children.length > 0) {
          this.checkedChildrenDepartment(item.children)
        }
      })
    },
    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'
            }
          }
        }
      }
    },
  }
}

你可能感兴趣的:(Element,vue,javascript,vue.js,前端,elementui)