vue el-table 多选框回填

news2024/11/17 21:45:29

主要代码:

    //选中列,所有列,表名
    toggleSelection(selectRows, totalRows, tablename) {
      this.$refs.table.clearSelection();
      if (selectRows.length > 0) {
        this.$nextTick(() => {
          selectRows.forEach(item => {
            totalRows.forEach(item1 => {
              if (item.userId == item1.userId) {
                this.$refs.table.toggleRowSelection(item1);
              }
            });
          });
        });
      }
    },

效果:

html

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="880px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="add">
        <el-form-item label="分组名称" prop="nums">
          <el-input v-model="form.nums" placeholder="请输分组名称" />
        </el-form-item>

        <el-form-item label="人员" prop="names">
          <el-input v-model="form.names" type="textarea" style="width:500px" />
          <el-input v-model="form.userIds" type="textarea" style="width:500px" />
          <el-button type="primary" plain size="mini" @click="selectProject" style="margin-left:20px">人员选择</el-button>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>



    <!-- 项目选择 -->
    <el-dialog title="选择人员" :visible.sync="projectOpen" width="1000px" :append-to-body="true" @close="cancelSelsectProject" :close-on-click-modal="false">
      <el-form :model="projectQueryParams" ref="projectQueryForm" :inline="true" v-show="showSearch" label-width="68px">

        <el-form-item label="部门" prop="deptId">
          <el-select v-model="projectQueryParams.deptId" filterable clearable placeholder="请选择部门">
            <el-option v-for="item in deptOptions" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="projectQueryParams.nickName" placeholder="姓名" clearable />
        </el-form-item>
        <el-form-item label="编制" prop="name">
          <el-select v-model="projectQueryParams.value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="projectHandleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="projectResetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="projectList" ref="table" @row-click="projectSelectRow" @selection-change="handleSelectionChange" :row-key="row=>row.userId" :highlight-current-row="true" @cell-dblclick="dblclickRow(row)" border>
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="部门" align="center" prop="dept.deptName" />
        <el-table-column label="姓名" align="center" prop="nickName" />
        <el-table-column label="编制" align="center" prop="types" />
      </el-table>

      <pagination v-show="projectTotal > 0" :total="projectTotal" :page.sync="projectQueryParams.pageNum" :limit.sync="projectQueryParams.pageSize" @pagination="getProjectList" />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSelectProject">确 定</el-button>
        <el-button @click="cancelSelsectProject">取 消</el-button>
      </div>
    </el-dialog>

js

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.projectRow = selection;
      this.ids = selection.map(item => item.userId);
      this.names = selection.map(item => item.nickName);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    
    //打开项目选择弹窗
    selectProject() {
      this.projectOpen = true;
      this.getProjectList();
    },

    /** 查询项目列表 */
    getProjectList() {
      this.loading = true;
      let rows = this.projectRow;
      listUser(this.projectQueryParams).then(response => {
        
        this.projectList = response.rows;
        this.projectTotal = response.total;
        
        let selectRows = this.projectRow;
        let totalRows = response.rows;
        
        this.loading = false;
        this.toggleSelection(selectRows, totalRows);
      });
    },

    //选中列,所有列,表名
    toggleSelection(selectRows, totalRows, tablename) {
      this.$refs.table.clearSelection();
      if (selectRows.length > 0) {
        this.$nextTick(() => {
          selectRows.forEach(item => {
            totalRows.forEach(item1 => {
              if (item.userId == item1.userId) {
                this.$refs.table.toggleRowSelection(item1);
              }
            });
          });
        });
      }
    },

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

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

相关文章

PyTorch常用操作

0. 先决条件 安装驱动、CUDA、cuDNN&#xff0c;请参考&#xff1a;https://blog.csdn.net/liugan528/article/details/128974129 import torch print(torch.__version__)#查看gpu是否可用 print(torch.cuda.is_available())#查看设备gpu个数 print(torch.cuda.device_count(…

数据结构学习 jz29 顺时针打印矩阵

关键词&#xff1a;模拟 题目&#xff1a;螺旋遍历二维数组 简单题做了超过40分钟 调了很久 不好 方法一&#xff1a; 我自己做的。 思路&#xff1a; xy_t&#xff1a; 记录xy的方向&#xff0c;往右走&#xff0c;往下走&#xff0c;往左走&#xff0c;往上走 t控制方…

Jupyter Notebook

2017年左右在大学里都听说过Jupyter Notebook&#xff0c;并且也安装用了一段时间&#xff0c;后来不知道什么原因没有用了。估计是那时候写代码的时候多一些&#xff0c;因为它可以直接写代码并运行结果&#xff0c;现在不怎么写代码了。 介绍 后缀名为.ipynb的json格式文件…

105、Zero-1-to-3: Zero-shot One Image to 3D Object

简介 官网  使用合成数据集来学习相对摄像机视点的控制&#xff0c;这允许在指定的摄像机变换下生成相同对象的新图像&#xff0c;用于从单个图像进行三维重建的任务。 实现流程 输入图像 x ∈ R H W 3 x \in \R^{H \times W \times 3} x∈RHW3&#xff0c;所需视点的相…

PyTorch——torchtext与PyTorch匹配的版本

一、匹配版本的对照表 二、按照对应版本的命令 例子&#xff1a; pip install torchtext0.9.1参考资料&#xff1a; Torchtext and PyTorch s Version Compatibility

云联惠 被查 消费积分合法化!——全新消费返利模式!共享购!

大家好 我是吴军 一家软件开发公司的产品经理 今天讲一讲&#xff0c;曾经盛极一时的云联惠&#xff0c;巅峰时期达到一千万的用户&#xff0c;资金6000亿。 前几年云联惠如火如荼&#xff0c;到处都是在宣传云联惠的&#xff0c;小编也略玩了一下下。 当时因为政策的不明朗…

SpringBoot:详解依赖注入和使用配置文件

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java项目分享》 《RabbitMQ》《Spring》《SpringMVC》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、&#x1f3…

【软件工程】《软件工程》期末复习提纲

《软件工程》期末复习提纲 第一章 第二章 第三章 第四章 第五章 第六章 第七章 第八章 第九章 第十章 第十一章 第十二章 第十三章 第十四章 小题参考 大题参考 《软件工程》期末复习提纲 第一章 1.在下列选项中&#xff0c;&#xff08; &#xff09;不是软…

10.9.2 std::function 代替函数指针 Page182~183

std::function是一个模板类&#xff0c;基本可作为函数指针的代替品&#xff0c;具备更多功能&#xff0c;特别是与函数对象及bind配合使用。使用std::function时&#xff0c;需要添加头文件 #include <functional> 1.定义函数指针 18行&#xff0c;定义了一个函数指针类…

Linux常用命令大全(三)

系统权限 用户组 1. 创建组groupadd 组名 2. 删除组groupdel 组名 3. 查找系统中的组cat /etc/group | grep -n “组名”说明&#xff1a;系统每个组信息都会被存放在/etc/group的文件中1. 创建用户useradd -g 组名 用户名 2. 设置密码passwd 用户名 3. 查找系统账户说明&am…

多模型图像特征可视化

特征图可视化是指将网络中某一层的特征图可视化出来&#xff0c;以便观察网络在不同层次上学到的特征。卷积可视化可以帮助深度学习研究者更好地理解卷积的概念和原理&#xff0c;从而更好地设计和优化卷积神经网络。通过可视化&#xff0c;研究者可以更清晰地看到卷积运算中的…

【现代密码学】笔记 补充7-- CCA安全与认证加密《introduction to modern cryphtography》

【现代密码学】笔记7-- CCA安全与认证加密《introduction to modern cryphtography》 写在最前面7 CCA安全与认证加密 写在最前面 主要在 哈工大密码学课程 张宇老师课件 的基础上学习记录笔记。 内容补充&#xff1a;骆婷老师的PPT 《introduction to modern cryphtography》…

【GitHub项目推荐--一行命令下载全网视频】【转载】

项目地址&#xff1a;https://github.com/soimort/you-get 首先声明&#xff0c;请不要使用该项目从事违法活动哦~仅供学习使用&#xff01; 解决痛点 如果你上网的时候看了一些东西不错&#xff0c;想下载下来&#xff0c;或者在线观看喜欢的视频&#xff0c;但是没有找到网…

坚持刷题|翻转二叉树

坚持刷题&#xff0c;老年痴呆追不上我&#xff0c;今天先刷个简单的&#xff1a;翻转二叉树 题目 226.翻转二叉树 考察点 翻转二叉树又称为镜像二叉树&#xff0c;使用Java实现翻转二叉树通常是为了考察对二叉树的基本操作和递归的理解能力 递归的理解&#xff1a; 能够理解…

【JaveWeb教程】(26) Mybatis基础操作(新增、修改、查询、删除) 详细代码示例讲解(最全面)

目录 1. Mybatis基础操作1.1 需求1.2 准备1.3 删除1.3.1 功能实现1.3.2 日志输入1.3.3 预编译SQL1.3.3.1 介绍1.3.3.2 SQL注入1.3.3.3 参数占位符 1.4 新增1.4.1 基本新增1.4.2 主键返回 1.5 更新1.6 查询1.6.1 根据ID查询1.6.2 数据封装1.6.3 条件查询1.6.4 参数名说明 1. Myb…

大语言模型面试问题【持续更新中】

自己在看面经中遇到的一些面试题&#xff0c;结合自己和理解进行了一下整理。 transformer中求和与归一化中“求和”是什么意思&#xff1f; 求和的意思就是残差层求和&#xff0c;原本的等式为y H(x)转化为y x H(x)&#xff0c;这样做的目的是防止网络层数的加深而造成的梯…

Spring Boot中加@Async和不加@Async有什么区别?设置核心线程数、设置最大线程数、设置队列容量是什么意思?直接在yml中配置线程池

在 Spring 中&#xff0c;Async 注解用于将方法标记为异步执行的方法。当使用 Async 注解时&#xff0c;该方法将在单独的线程中执行&#xff0c;而不会阻塞当前线程。这使得方法可以在后台执行&#xff0c;而不会影响主线程的执行。 在您提供的代码示例中&#xff0c;a1() 和…

【conda】pip安装报错,网络延时问题解决记录(亲测有效)

【conda】pip安装报错&#xff0c;网络延时问题解决记录 1. pip install 报错如下所示2. 解决方案&#xff1a; 1. pip install 报错如下所示 pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool(hostfiles.pythonhosted.org, port443): Read timed out.…

Spring Boot 中批量执行 SQL 脚本的实践

在Spring Boot应用中&#xff0c;有时候我们需要批量执行存储在数据库中的 SQL 脚本。本文将介绍一个实际的案例&#xff0c;演示如何通过 Spring Boot、MyBatis 和数据库来实现这一目标。 0、数据库层 CREATE TABLE batchUpdate (id INT AUTO_INCREMENT PRIMARY KEY,update_…

现阶段Python和Java哪个更吃香?

现阶段Python和Java哪个更吃香&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Java的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&…