el-cascader 数据回显 checkbox没有被勾选

文章描述了一个关于如何在前端开发中使用Vue的ElementUI组件`el-cascader`实现多选功能,当用户点击所有队伍最新版本按钮时,系统会自动选择每个队伍的最新版本样本,且只保存子级ID。涉及到的API调用和方法包括数据获取、状态管理等。
摘要由CSDN通过智能技术生成

需求:

需要支持多选以及能搜索,并且  点击所有队伍最新版本这个功能按钮时,要将用户勾选的数据保存的前提下,将满足条件的数据也一并勾选。最后保存的数据 只需要子级的id,组成数组就行了,所以我这里有用到emitPath: false 这个属性


譬如当前用户选择了8556, 然后点击  所有队伍最新版本。 

 效果应该是这样的:

完整代码如下 :
 <el-form-item label="目标样本集" prop="extractSampleIds">
        <el-cascader
          @visible-change="chooseTarget"
          placeholder="请选择各队最新版本"
          :options="sampleOptions"
          v-model="rulesForm.extractSampleIds"
          ref="cascader"
          :props="{
            multiple: true,
            value: 'id',
            label: 'name',
            emitPath: false,
          }"
          filterable
        >
        </el-cascader>
        <el-button class="newest-btn" type="text" @click="setInitialSelection"
          >所有队伍最新版本</el-button
        >
      </el-form-item>
methods: {
      // 获取团队分组数据
    async getGroup() {
      const { competitionId, sampleType } = this.rulesForm;
      const res = await teamSimpleApi.queryTeam(competitionId, sampleType);
      const { code, object, msg } = res.data || {};
      if (code === 0) {
        this.sampleOptions = object.map((item) => {
          return {
            id: item.teamId,
            name: item.teamName,
            children: item.samples.map((second) => {
              return {
                id: second.id,
                name: second.submitVersion,
                latestVersion: second.latestVersion,
              };
            }),
          };
        });
      } else {
        this.$notify({
          title: "错误",
          message: msg,
          type: "error",
        });
      }
    },
setInitialSelection() {
      let selectedIds = []; // 创建一个新的数组用于存储选中的sample.id
      this.sampleOptions.forEach((team) => {
        team.children.forEach((sample) => {
          if (sample.latestVersion === 1) {
            selectedIds.push(sample.id);
          }
        });
      });
      // 使用新数组替换旧数组
      this.$set(this.rulesForm, "extractSampleIds", selectedIds);
    },

}    

                                                                                                                               

                                                                                                                          希望有帮助到你~


  • 8
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值