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

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

问题描述：

使用el-cascader组件，子集不能多选。选中子级的选项后，只能选中一个选项，多选后再次回显，父级就会整个取消选中，选中状态不会保存下来。而实际需求是需要多选的，同时能影响到其父选项和子选项。

问题原因：

这种情况多半是由于el-cascader组件的多选属性(multiple)设置错误导致的。如果multiple属性没有设置，表明el-cascader组件只能单选；如果设置了multiple属性为true，子选项也能够实现多选，但会导致父选项和子选项的选中状态互相独立，不会相互影响，不能达到需求；如果设置了multiple属性为false，这时需要设置属性checkStrictly为false，这个属性可以允许选中子选项的同时影响父选项，但是不能多选，一次只能选中一个。

解决方案：

针对该问题，可以采用以下解决方案：

1. 设置el-cascader的multiple属性为true。这样，子选项可以多选。

2. 将el-cascader的checkStrictly属性设置为false。这样，子选项的选中状态会影响其父选项的选中状态。

3. 配合使用默认选中的值来实现选中状态的保存，可以在选中时把选中的值保存到一个数组中，再将该数组传递给el-cascader组件，这样再次打开时就可以回显之前选中的值。

正确代码：

在el-cascader中添加multiple和checkStrictly属性：

实现选中状态的保存和回显：

created() {
  this.getAll();
},
methods: {
  // 获取全部数据
  getAll() {
    getAllList().then((res) => {
      this.list = translateDataToTree(res);
    });
  },
  // 获取选中的数据并保存
  fetchSelected() {
    const params = { id: this.form.id || 0 };
    getListMenus(params).then((res) => {
      if (res && res.length > 0) {
        const checkedKeys = [];
        res.forEach(item => {
          if (item.checked === true) {
            checkedKeys.push(item.id);
          }
        });
        this.selectedList = checkedKeys; // 根据选中子菜单的id设置selectedList的值
      }
    });
  },
}

以上就是解决该问题的思路和正确代码实现，希望能对你有所帮助。

该回答引用自GPT-3.5,由博主GISer Liu编写：

根据你的描述，问题似乎是关于使用 Element UI 的 el-cascader
组件时出现了子集不能多选的情况，并且选中多个子选项后再次回显时会导致整个父级取消选中的问题。针对这个问题，我会提出一些解决思路和解决方案。

问题分析：

1. el-cascader 组件设置问题 ：你已经将 multiple 设置为 true，并且 checkStrictly 设置为 false，这应该允许多选并且子选项的选择不会影响到父选项。
2. 数据处理问题 ：从你提供的代码来看，涉及到数据的处理，包括从接口获取数据、转换数据结构等。可能存在数据处理不当导致的问题。
3. 数据回显问题 ：在编辑时，可能存在数据回显时处理不当导致的问题，导致整个父级取消选中。

   解决方案：

   1. 检查数据结构：

   确保从接口获取的数据以及在组件中使用的数据结构是正确的，尤其是父子关系的嵌套结构，以及每个节点是否正确标记了选中状态。

   2. 数据回显处理：

   在编辑时，确保正确设置 v-model，以及在数据回显时遍历设置选中状态的逻辑是否正确。可以尝试使用 Vue DevTools
   等工具检查数据的变化情况。

   3. 调试与排查：

   通过输出日志或者使用调试工具，检查每个步骤中数据的变化情况，尤其是数据在组件中的传递和处理过程中是否发生了意外的变化。

   代码修改建议：

   javascript
   Copy code

   // 在 el-cascader 组件中，确保正确设置 multiple 和 checkStrictly
   "selectedList"
   collapse-tags
   :options="list"
   :props="{ multiple: true, value: 'id', label: 'name', children: 'children', checkStrictly: false }"
   size="medium"
   :style="{ width: '100%' }"
   />
   // 在编辑时，检查数据回显逻辑
   fetchData() {
   if (this.form.id === undefined) {
   this.form.id = '';
   }
   const params = "id=" + this.form.id;
   getListMenus(params).then((res) => {
   if (this.title === '添加') {
   // 添加逻辑
   } else {
   // 编辑时的回显逻辑
   this.defaultCheckedKeys = [];
   res.forEach(item => {
   if (item.checked === true) {
   this.defaultCheckedKeys.push(item);
   }
   });
   // 数据回显后处理选中状态
   this.test(this.defaultCheckedKeys);
   }
   });
   },
   test(val) {
   let aa = translateDataToTree(val); // 将选中的部分转换为树形结构
   this.selectedList = this.getIdsFromTree(aa); // 设置选中的节点
   },
   

   总结：

   以上是我对你描述的问题的分析和解决思路，希望能帮助你解决这个问题。如果需要进一步帮助或者有其他问题，请随时提出。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑