vue el-table 多选框回填

主要代码:

    //选中列,所有列,表名
    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);
              }
            });
          });
        });
      }
    },

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

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

相关文章

ucloud轻量云(wordpress)配置ssl

ucloud 轻量云(wordpress)配置ssl 1、上传ssl证书到/usr/local/software/apache/conf&#xff0c;这里的文件名和内容与ucloud控制台下载下来的文件名和内容保持一致 2、修改httpd.conf文件 vim /usr/local/software/apache/conf/httpd.conf 找到下面两行&#xff0c;去掉注…

【极光系列】springboot集成redis

【极光系列】springboot集成redis tips&#xff1a;主要用于快速搭建环境以及部署项目入门 gitee地址 直接下载源码可用 https://gitee.com/shawsongyue/aurora.git模块&#xff1a;aurora_rediswindow安装redis安装步骤 1.下载资源包 直接下载解压&#xff1a;https://pa…

【深入剖析Java】「重塑技术功底」攻破Java技术盲点之剖析注解技术的实现原理和开发指南

攻破Java技术盲点之剖析注解技术的实现原理和开发指南 什么是Annotation注解Annotation的定义Annotation的作用Annotation不会影响程序代码的执行什么是metadata&#xff08;元数据&#xff09;Annotation和Annotation类型AnnotationAnnotation类型注解的分类&#xff08;参数个…

C++|29.纯虚函数/接口(待完成)

纯虚函数是一种特殊的虚函数。 普通的虚函数允许子类的同名函数对其进行重写&#xff0c;同时普通的虚函数本身是可以单独进行使用的。 而纯虚函数是一个空壳&#xff0c;强制要求所派生的类在继承的过程中必要将该虚函数进行实现。 如上图&#xff0c;纯虚函数只需要在vir…

汇编和c++初学,c++字符串加整型,导致的字符串偏移

从汇编角度分析"helloworld"1 “helloworld”1对应 mov dword ptr [a],1 mov eax,dword ptr [a] add eax,offset string "helloworld" (03CCCBCh)eax地址偏移加了1&#xff0c; lea ecx,[test]最终取的内存偏移地址&#xf…

解决vscode中导入的vue项目tsconfig.json文件首行标红问题

问题描述 vscode中导入的vue项目tsconfig.json文件标红&#xff0c;文件中第一行 { 处标红 问题分析 项目中自定义的tsconfig.json文件与vscode本身会自动进行JavaScript的语义检查发生冲突&#xff0c;而tsconfig.json文件无法覆盖vscode本身的javascript检查&#xff0c;故…

跨境电商如何开数百个账号窗口?多窗口同步功能了解一下!

还在为管理众多店铺账号头疼&#xff1f;那你可就得了解一下多窗口同步这个功能了。想必很多卖家都遇到过需要同时打开多个窗口分别进行同步操作的问题&#xff0c;但有不少人不知道怎么做&#xff0c;今天龙哥就来为大家揭秘如何实现一键多窗口同步&#xff0c;掌握了技巧就会…

大数据开发之Flume

第 1 章&#xff1a;Flume概述 1.1 Flume定义 Flume是Cloudera提供的一个高可用的&#xff0c;高可靠的&#xff0c;分布式的海量日志采集、聚合和传输系统。 1.2 Flume基础架构 1.2.1 Agent 1、Agent&#xff1a;Flume的部署单元&#xff0c;本质是一个JVM进程&#xff0…

二级域名分发系统源码 对接易支付php源码 全开源

全面开源的易支付PHP源码分享&#xff1a;实现二级域名分发对接 首先&#xff0c;在epay的config.php文件中修改您的支付域名。 随后&#xff0c;在二级域名分发网站上做相应修改。 伪静态 location / { try_files $uri $uri/ /index.php?$query_string; } 源码下载&#…

HCIA 网络基础:

应用层 抽象语言-->编码 表示层 编码-->二进制 会话层 建立会话&#xff0c;提供绘画地址。 应用于程序内部进行区分&#xff0c;没有统一标准 上三层主要是软件层面&#xff08;应用 程序处理数据&#xff09; 下四层主要负责数据传输 传输层 端口号 分段 &#xff…

GAMES101-Assignment7

一、问题总览 在之前的练习中&#xff0c;我们实现了Whitted-Style Ray Tracing 算法&#xff0c;并且用BVH等加速结构对于求交过程进行了加速。在本次实验中&#xff0c;我们将在上一次实验的基础上实现完整的Path Tracing算法。 二、代码框架 2.1 修改内容 相比上一次实验…

关于VS2019静态链接

前几天想要将一个项目静态链接到另一个项目下&#xff0c;当作库进行使用&#xff0c;但是不知道怎么去进行操作&#xff0c;在网上找了很多方法&#xff0c;试过都不行&#xff0c;最后经过很多步骤最终才链接好&#xff0c;接下来给大家介绍一下&#xff0c;vs2019怎么进行工…

uni-app的学习【第三节】

五 运行环境判断与跨端兼容 uniapp为开发者提供了一系列基础组件,类似HTML里的基础标签元素,但uni-app的组件与HTML不同,而是与小程序相同,更适合手机端使用。 虽然不推荐使用 HTML 标签,但实际上如果开发者写了`div`等标签,在编译到非H5平台时也会被编译器转换为 `view`…

【Python机器学习】深度学习——一些理论知识

深度学习在很多机器学习应用中都有巨大的潜力&#xff0c;但深度学习算法往往经过精确调整&#xff0c;只适用于特定的使用场景。先学习一些简单的方法&#xff0c;比如用于分类和回归的多层感知机&#xff08;MLP&#xff09;&#xff0c;它可以作为研究更复杂的深度学习方法的…

使用Github + PicGo搭建个人图床,并使用CDN加速

文章目录 前言创建仓库配置PicGo如何使用 前言 在写博客的时候&#xff0c;常常需要为博客配图&#xff0c;于是一个好用稳定的图床的重要性不言而喻。本文主要介绍如何使用GitHub PicGo的方式快速搭建一个个人使用的图床。该方式方便快捷&#xff0c;还免费hh&#xff0c;唯…

Linux系统使用docker部署Geoserver(简单粗暴,复制即用)

1、拉取镜像 docker pull kartoza/geoserver:2.20.32、创建数据挂载目录 # 统一管理Docker容器的数据文件,geoserver mkdir -p /mydata/geoserver# 创建geoserver的挂载数据目录 mkdir -p /mydata/geoserver/data_dir# 创建geoserver的挂载数据目录&#xff0c;存放shp数据 m…

利用Socket动手实现简单HTTP协议

☆* o(≧▽≦)o *☆嗨~我是小奥&#x1f379; &#x1f4c4;&#x1f4c4;&#x1f4c4;个人博客&#xff1a;小奥的博客 &#x1f4c4;&#x1f4c4;&#x1f4c4;CSDN&#xff1a;个人CSDN &#x1f4d9;&#x1f4d9;&#x1f4d9;Github&#xff1a;传送门 &#x1f4c5;&a…

AcrelEMS-EV汽车工业能效管理平台助力能源管理体系的建立和实施

摘要 能源是国民经济和社会发展重要的物质基础。随着能源紧缺越来越严重&#xff0c;节能降耗已经成为各制造行业必不可少的竞争手段。文章介绍了某汽车公司建立能源管理体系的方法和步骤&#xff0c;分析了能源管理体系建立带来的经济效益和积极影响&#xff0c;AcrelEMS-EV汽…

威尔·库尔特《趣学贝叶斯统计:橡皮鸭、乐高和星球大战中的统计学》学习笔记(1):以A/B测试为例学习贝叶斯统计

主要是新学期的概率论的作业要求&#xff1a;Write a summary (no more than of a page) of your experience with an application of probability to a real-life situation (e.g., an engineering problem. –How was probability used to model the phenomena/situation?…