el-cascader 父关联子,子不关联父

需求:选中父级,各个层级的子级都要选中,取消父级,下面所有子级取消选中;选中子级的时候,父级不选,取消子级,父级不取消。

思路:设置父子级完全不关联,checkStrictly属性设置为true,然后通过选择父级,手动将下面子级全部选中,反之,全部取消。

主要代码:


// utils/index.js
// 处理树节点 选中父 子全部选上
export function checkedChildren(val) {
  for (const item of val) {
    item.checked = true
    if (item.children && item.children.length !== 0) {
      checkedChildren(item.children)
    }
  }
  return val
}
// 处理树节点 取消父 子全部取消
export function cancelChildren(val) {
  for (const item of val) {
    item.checked = false
    if (item.children && item.children.length !== 0) {
      cancelChildren(item.children)
    }
  }
  return val
}

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