使用el-cascader组件子集不能多选

Question

下拉选中子集只能选中一个，选中多个后再次回显就会整个父级取消选中，为什么？multiple设置为true允许多选，checkStrictly设置为false则允许选中子选项同时影响父选项

<el-cascader v-model="selectedList" collapse-tags :options="list" :props="{
              multiple: true, value: 'id', label: 'name',children: 'children',checkStrictly: false }" size="medium"
            :style="{ width: '100%' }" />
created() {
      this.getAll()
    },
  getAll(){
        getAllList().then((res) => {
          this.list = translateDataToTree(res) //all菜单转树形结构
          // console.log(this.list)//ok
          })
      },
//获取数据
      fetchData() {
        if (this.form.id == undefined) {
          this.form.id = ''
        }
        const params = "id=" + this.form.id
        getListMenus(params).then((res) => {
          // this.list = res
          if (this.title == '添加') {
          } else {
             //编辑-选中数据回显
            this.defaultCheckedKeys = []
              res.forEach(item => {
              if (item.checked == true) {
                this.defaultCheckedKeys.push(item)
              }
            })
            // console.log('再次打开', this.defaultCheckedKeys)
            this.test(this.defaultCheckedKeys)
          }
        });
      },
 test(val) {
          // console.log(this.list)//ok
          console.log('vvv',val)
            //编辑
            let aa = translateDataToTree(val) //选中部分
            this.selectedList = this.getIdsFromTree(aa) //二维id数组
            // if (this.form.id === 1) {
            //   //超级管理员默认选中全部菜单
            //   // this.selectedList =this.getIdsFromTree(this.list)
            //   this.selectedList = this.getIdsFromTree(aa) //二维id数组
            //   console.log(this.selectedList)
            // } else {
            //   this.selectedList = this.getIdsFromTree(aa) //二维id数组
            // }
            console.log(this.selectedList)
      },

Answer 1

引自免费微信小程序：皆我百晓生

根据您提供的代码和描述，看起来您在使用Element UI的el-cascader组件时遇到了一些问题。在尝试回显多选状态时，所有父级节点被取消选择。这可能是因为el-cascader的默认行为是在进行多选时，如果选择了某个子项，则会自动选中其父级节点。而当您从服务器获取数据并试图回显多选状态时，由于选择了多个子项，导致了父级节点的选中状态被重置。

要解决这个问题，您可以尝试将回显数据的操作调整到watch监听器中，并且对已选中的子节点进行处理，确保它们的父级节点也被选中。以下是修改后的代码示例：

首先，在您的Vue组件中添加一个watch监听器来观察defaultCheckedKeys的变化：

<script>
export default {
  ...
  watch: {
    defaultCheckedKeys(newValues, oldValues) {
      if (newValues && newValues.length > 0) {
        this.rebuildSelectedList(newValues);
      }
    },
  },
  methods: {
    ...
    rebuildSelectedList(selectedKeys) {
      // 这里我们手动处理多选逻辑，确保所有的父级节点都被选中
      this.selectedList = [];
      selectedKeys.forEach(key => {
        const node = this.findNodeByKey(this.list, key);
        if (node) {
          this.addParentNodes(node, this.selectedList);
        }
      });
    },
    findNodeByKey(nodes, key) {
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i];
        if (node.id === key) {
          return node;
        } else if (node.children) {
          const foundNode = this.findNodeByKey(node.children, key);
          if (foundNode) {
            return foundNode;
          }
        }
      }
      return null;
    },
    addParentNodes(node, result) {
      while (node.parent) {
        result.push(node.parent.id);
        node = node.parent;
      }
    },
    ...
  },
  ...
};
</script>

然后在getAll()和fetchData()方法中，只更新defaultCheckedKeys，不直接操作selectedList：

methods: {
  ...
  getAll() {
    ...
  },
  fetchData() {
    ...
    this.defaultCheckedKeys = res.filter(item => item.checked === true).map(item => item.id);
    this.test();
  },
  ...
}

现在，当回显数据时，rebuildSelectedList方法会被调用，它会遍历defaultCheckedKeys中的每个值，找到对应的节点，并递归地将父级节点也加入到selectedList中。这样就可以实现多选子节点的同时保持父级节点的选中状态。

请注意，这个解决方案依赖于findNodeByKey和addParentNodes这两个辅助函数，它们用于查找给定ID的节点以及向上遍历并收集父级节点。这些函数假定list数据结构是一个具有id, parent（指向其父节点），children（子节点列表）属性的树形结构。如果实际的数据结构不同，请相应地调整这两个函数。