需求:

需要支持多选以及能搜索,并且  点击所有队伍最新版本这个功能按钮时,要将用户勾选的数据保存的前提下,将满足条件的数据也一并勾选。最后保存的数据 只需要子级的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);
    },

}    

                                                                                                                               

                                                                                                                          希望有帮助到你~


Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐