el-table 默认勾选数据

news2024/11/16 2:47:38

目录

效果图

 步骤:

1. 看elementui 官网上的案例,用到的方法是自带的 toggleRowSelection

 2. 思路 


原委

       选中主表中的一条数据;判断与子表中的数据是否关联(如果子表的关联ID==主表的ID,则子表的这条数据显示被勾选)。

效果图

 步骤:

1. 看elementui 官网上的案例,用到的方法是自带的 toggleRowSelection

 2. 思路 

    判断 选中的这条数据的ID与弹窗里面的数据进行匹配,建一个临时数组,如果匹配成功,放入临时数组中,然后使用官网给的方法。

代码:

//1. 获取主表选中的数据
roleID =1

//弹窗
//2.  调接口获取子表格数据
that.$API.GetDepartmentUser(param).then((res) => {
        let tempTabledata = JSON.parse(res.data.data);
        
        that.$refs.cummonTable.SettableData(tempTabledata);
        this.getselectData(tempTabledata); // lu 然后掉方法,这个方法就是给子表关联ID与主表的ID一样的显示被勾选
      });


/**
     * 3. 获取==角色ID的数据,页面展示被勾选
     */
    getselectData(data) {
      
      let tempselectData = []; //临时数组
      data.map((item) => {
        // 遍历 子表数据data中RoleID(关联ID)== roleID(主表ID),放入新数据
        if (item.RoleID == this.RoleID) {
          tempselectData.push(item);
        }
      });
      console.log(tempselectData, "遍历之后的数据");
      let rows = tempselectData;
      //下面这个就是elementui 提供的方法
      if (rows) {
        rows.forEach((row) => {
          if (this.dialogVisible) {
            this.$nextTick(() => {
              this.$refs.cummonTable.$refs.table.toggleRowSelection(row, true);  //true 说明显示被勾选
            });
          }
        });
      } else {
      }
    },

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CADD蛋白结构分析、虚拟筛选、分子对接(蛋白-蛋白、蛋白-

时间:第一天上午 课程名称:生物分子互作基础 课程内容:1.生物分子相互作用研究方法 1.1蛋白-小分子、蛋白-蛋白相互作用原理 1.2 分子对接研究生物分子相互作用 1.3 蛋白蛋白对接研究分子相互作用 课程名称:蛋白数据库 课程内容:1. PDB 数据库介绍 1.1 PDB蛋白数据库功能 1.2 …

Springboot整合jdbc_template

1.构建Springboot项目 利用springboot整合jdbctemplate,并不需要导入其他的依赖,具体的项目结构图如图 2.写domain层 数据库映射的实体类 package com.jkk.springboot_jdbc_template.domain;/*** author jkk*/import lombok.AllArgsConstructor; import lombok…

04 - C++学习笔记: 循环语句和跳转语句

在C编程中,循环语句和跳转语句是非常重要的控制结构。循环语句允许重复执行一段代码,而跳转语句允许在程序执行过程中改变执行的流程。本篇笔记将介绍C中常用的循环语句和跳转语句,并通过例子进行说明。 🔁循环类型 C 编程语言提…

查询子节点 postgresql

数据库为postgresql WITH RECURSIVE cte AS (SELECTn. ID,n. com_name,n."parentId" AS pidFROMcompany AS nWHEREn. ID = 2UNION ALLSELECTr. ID,r. com_name,cte. ID AS pidFROMcteJOIN company AS r ON r.

轻松实现邮箱验证码功能!快来体验Spring Boot的神奇力量!

邮件验证是现代互联网服务中常用的安全功能,本文介绍如何利用Spring Boot框架快速搭建一个高效易用的邮箱验证码功能。从配置邮箱>发送服务,到编写验证逻辑,无痛实现邮箱验证码功能轻而易举。快来掌握这个技能,加强您的应用安全…

论文解读 | CVPR 2020:PV-RCNN:用于三维物体检测的点体素特征集提取

原创 | 文 BFT机器人 论文《PV-RCNN: Point-Voxel Feature Set Abstraction for 3D Object Detection》是一篇关于三维物体检测的论文。该论文提出了一种名为PV-RCNN的方法,用于从点云数据中进行三维物体检测,并在各种应用中取得了优秀的性能。 论文的主…

数据库第一章

一。数据库 1.概述 数据库database用来存储数据和管理数据的仓库 分类:关系型MySQL/非关系型Redis 关系型数据库(二维表格模型):Oracle,MySQL,SQLServer,Access 非关系型数据库:MongoDB,Redis&#xf…

linux 文件锁flock与fcntl bytes级别精细控制不再是困难

​专栏内容: postgresql内核源码分析 手写数据库toadb 并发编程 个人主页:我的主页 座右铭:天行健,君子以自强不息;地势坤,君子以厚德载物. 文件锁 概述 前面博客介绍了多任务下互斥的方法,如…

Docker容器的数据卷

Docker容器的数据卷 一、数据卷概念 概念:数据卷是宿主机中的一个目录或文件 当容器目录和数据卷目录绑定后,对方的修改会立即同步一个数据卷可以被多个容器同时挂载一个容器也可以挂载多个数据卷 可以解决以下问题 可以解决容器数据的持久化&#xff0…

高效学习法

目标明确,难度适中 全面:宏观概述,微观详尽 明确:目标要明确,否则陷入选择漩涡,导致大脑内耗。李白的“行路难,多歧路” 渐进:既要进步,也要逐步…

47 # 实现可读流

上一节讲了 fs.createReadStream 创建一个可读流,那么怎么查看它的源码是怎么实现的? 我们可以采用打断点的方式:我们可以看到先执行了 lazyLoadStreams 如果没有 ReadStream 就会 require 内部的 internal/fs/streams 模块 通过 internal/f…

免费开源 | 基于SpringBoot+Vue的物流管理系统

1-介绍 基于SpringBootvuemybatis-plus的简单的物流管理系统DEMO,前后端分离,可用于扩展基础,可用于简单课设,可用于基础学习 2-技术架构 SpringBootvuemybatis-plusmysql 8.0 3-使用说明 安装数据库demo/sql/wuliu.sql运行后端demo 1-…

QT调用glog日志流程

glog日志库是Google开源的轻量级的日志库,平时在开发过程中经常要使用到日志,本篇记录Qt项目使用glog日志库的记录。 1.首先下载cmake,Download | CMake 安装设置环境变量,检查安装情况 2.下载glog源码 git clone https://git…

指数分布的概率密度推导

指数分布的概率密度,一直理解的不够深入,一直都不明白为什么是这么奇怪的形式,指数位置的分母为什么有个-theta,也一直不太明白该分布的特点,直到看到如下篇博文: 指数分布概率密度推导1 指数分布概率密度…

PyCharm安装配置PyQt5/QtDesigner/PyUic的超详细教程

目录 1.介绍 2.安装与配置 1.下载安装PyQt5 2.QtDesignerPyUic的安装配置 1.下载安装 2.打开designer.exe所在位置 3.配置PyCharm QtDesigner 4.验证安装是否成功 5.PyCharmPyUic快捷菜单工具配置:便于将Qt的UI文件转换成.py文件 6.配置PyQt5 PyRcc:便于将资源文件转码 1…

拒绝裸奔,使用jasypt为SpringBoot配置文件进行加密。

平日使用Github上传代码时,不可避免的会遇到一个问题就是配置文件中的敏感信息的处理,如MySQL的用户名密码,Redis的密码等。而如果一不注意提交到Github后,无异于出门不锁还留把钥匙,后果不堪设想, 近些年开…

随笔-毕业十周年聚会

文章目录 随笔-毕业十周年聚会1. 引子2. 流水账3. 感悟 随笔-毕业十周年聚会 1. 引子 上周三,许久不联系的班长给我发了个微信,问我周六有没有时间,学校和学院组织了毕业十周年校友返校活动,凑着这个机会大家聚一聚。 一时间有…

SpringBoot项目从0到1配置logback日志打印

大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。 以下是正文! 一、写文背景 我们在写后端…

运输层:UDP和TCP对比

1.运输层:UDP和TCP对比 笔记来源: 湖科大教书匠:UDP和TCP对比 声明:该学习笔记来自湖科大教书匠,笔记仅做学习参考 无连接的UDP、面向连接的TCP UDP支持单播(一对一)、多播(一对多…

2023上半年软考系统分析师科目一整理-18

2023上半年软考系统分析师科目一整理-18 使用 Cache 改善系统性能的依据是程序的局部性原理。程序中大部分指令是()的。设某计算机主存的读/写时间为 100ns,有一个指令和数据合一的 Cache,已知该 Cache的读&#xff0f…