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

需求:

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

}    

                                                                                                                               

                                                                                                                          希望有帮助到你~


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/584480.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ITMS-90426: Invalid Swift Support

原文 Please correct the following issues and upload a new binary to App Store Connect. ITMS-90426: Invalid Swift Support - The SwiftSupport folder is missing. Rebuild your app using the current public (GM) version of Xcode and resubmit it. 解决方式 ITMS-…

U盘提示“未初始化”?别慌,数据还有救!

当你满心期待地将U盘插入电脑&#xff0c;准备传输或读取重要文件时&#xff0c;突然弹出一个提示框&#xff1a;“U盘没有初始化”。遇到这样的情况&#xff0c;相信很多人都会感到焦虑和迷茫。别急&#xff0c;这篇文章将为你详细解析U盘未初始化的原因&#xff0c;并提供有效…

【设计模式】简单工厂模式(Simple Factory Pattern)

工厂模式&#xff08;Factory Pattern&#xff09; 用于创建不同类型的奖品对象。您可以创建一个奖品工厂&#xff0c;根据配置的类型来实例化相应的奖品对象。 public interface Prize {void award(); }public class MoneyPrize implements Prize {Overridepublic void awar…

一、初识Django

简介 Django 是一个用于构建 Web 应用程序的高级 Python Web 框架。 版本对应 不同版本的django框架是基于特定的不同的python版本开发的&#xff0c;所以不同版本的django框架要正常执行功能只能安装特定的python版本 Django安装 安装 Django # 全局安装 pip install dj…

实战干货|Spark 在袋鼠云数栈的深度探索与实践

Spark 是一个快速、通用、可扩展的大数据计算引擎&#xff0c;具有高性能、易用、容错、可以与 Hadoop 生态无缝集成、社区活跃度高等优点。在实际使用中&#xff0c;具有广泛的应用场景&#xff1a; 数据清洗和预处理&#xff1a;在大数据分析场景下&#xff0c;数据通常需要…

C/C++ 入门(9)编译链接

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 目录 一、域 1、分类 2、搜索顺序 二、编译链接 1、代码在形成可执行文件的过程 2、符号表 三、问题 1、带有缺省参数的函数声明和定义分离 一、域 1、分类 域&#xff1a;全局域、局部域、命…

CSS-IN-JS Emotion

为什么会有css-in-js 优点 缺点 使用emotion插件库 npm i emotion/core emotion/styled使用时需要解析css属性 使用方式一&#xff1a; 通过注释告诉babel不讲jsx转化为react.create Element的调用&#xff0c;而是转化为jsx语法。会导致一个警告react未使用。 使用方式二&am…

对虾病害分类数据集889张7类别

数据集类型&#xff1a;图像分类用&#xff0c;不可用于目标检测无标注文件 数据集格式&#xff1a;仅仅包含jpg图片&#xff0c;每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)&#xff1a;889 分类类别数&#xff1a;7 类别名称:["baibanbing","bai…

Vitis HLS 学习笔记--Schedule Viewer 调度查看器

目录 1. 简介 2. Schedule Viewer详解 2.1 视图说明 2.1.1 Operation\Control Step 2.1.2 周期关系图 2.1.3 Schedule Viewer 菜单栏 2.1.4 属性视图 2.2 内容说明 2.2.1 实参&#xff08;b&#xff09;解释 2.2.2 实参&#xff08;a&#xff09;解释 2.2.3 变量&am…

TCP协议在物联网中的实战

一、TCP协议介绍 网上对TCP协议介绍众多&#xff0c;本人按照自己的理解简单介绍一下。 TCP&#xff08;Transmission Control Protocol&#xff0c; 传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输控制层通信协议。 1.1 协议机制 1.1.1 三次握手 &…

MongoDB安装(windows)

mongodb 的安装&#xff08;windows&#xff09; 下载软件 官网下载&#xff1a;https://www.mongodb.com/ 安装 1.双击打开MSI包 2.同意协议 3.选择安装形式 complete:默认安装&#xff0c;不可以修改安装地址 custom&#xff1a;自定义安装【推荐】 4.选择安装路径和…

【c++leetcode】35. Search Insert Position

问题入口 二分搜索 时间复杂度O(logn) class Solution { public:int searchInsert(vector<int>& nums, int target) {int start 0;int end nums.size() - 1;while (start < end){int mid (start end) / 2;if (nums[mid] target){return mid;}else if(nums…

Axure如何调起浏览器的打印功能

Axure如何调起浏览器的打印功能 答&#xff1a;javascript:window.print(); 不明白的继续往下看 应用场景&#xff1a; 原型设计中&#xff0c;页面上的打印按钮&#xff0c;需要模拟操作演示&#xff0c;需要点击指定的按钮时&#xff0c;唤起浏览器的打印功能&#xff08…

QT httpServer多线程后台服务器的例子实现

1.需求 1.1 用户需要其他平台&#xff08;web端&#xff09;调用Qt平台的接口&#xff0c;获取想要的数据并实时显示在网页里&#xff0c;比如实时的温湿度&#xff0c;用户数据等 1.2 用户需要在其他平台&#xff08;web端&#xff09;调用Qt平台的接口&#xff0c;下发数据…

使用 GitHub Actions 实现项目的持续集成(CI)

目录 什么是 GitHub Actions 基础概念 Workflow 文件 Workflow 语法 实例&#xff1a;编译 OpenWrt 什么是 GitHub Actions GitHub Actions 是 GitHub 推出的持续集成&#xff08;Continuous Integration&#xff0c;简称 CI&#xff09;服务它允许你创建自定义工作流&am…

【webrtc】MessageHandler 3: 基于线程的消息处理:以sctp测试为例

消息处理可以用于模拟发包处理G:\CDN\rtcCli\m98\src\net\dcsctp\socket\dcsctp_socket_network_test.cc 这个实现中,onMessage还是仅对了一种消息进行处理,就是接收则模式下,打印带宽。当然,可能程序有多个消息,分别在不同的onmessage中执行?SctpActor:以一个恒定的速率…

【webrtc】MessageHandler 1: 基于线程的消息处理:以10毫秒处理音频为例

基于m98 G:\CDN\rtcCli\m98\src\audio\null_audio_poller.h分发的消息由MessageHandler 类通过其抽象接口OnMessage 实现处理 NullAudioPoller NullAudioPoller 是一个处理audio的消息的分发器 poll 启动:

Adobe Firefly 3.0 AI 图像生成器来了

Adobe 发布其 Midjourney 和 Dall-E 3 竞争对手Firefly 2.0已经半年了。几天前&#xff0c;他们发布了Firefly 3.0&#xff08;目前处于测试阶段&#xff09;&#xff0c;这是他们最新的文本到图像人工智能工具&#xff0c;其中包含一些非常酷的更新。在我们深入了解细节之前&a…

开发一个语音聊天社交app小程序H5需要多少钱?

社交&#xff0c;即时通讯APP系统。如何开发一个社交App||开发一个即时通信应用是一项复杂而充满挑战的任务&#xff0c;需要考虑多个技术、开发时间和功能方面的因素。以下是一个概要&#xff0c;描述了从技术、开发时间和功能角度如何开发这样的应用&#xff1a; 1. 技术要点…

Docker-compose的介绍与用法

Docker-compose Docker Compose 是一个开源的容器编排工具&#xff0c;由 Docker 官方开发。它允许开发者定义一个或多个 Docker 容器作为单个服务&#xff0c;并将这些服务组合成一个项目。这些定义被保存在一个 YAML 文件中&#xff0c;称为 docker-compose.yml。 使用 Dock…