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);}});});});}},

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

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

相关文章

C语言天花板——指针(经典题目)

指针我们已经学习的差不多了&#xff0c;今天我来给大家分享几个经典的题目&#xff0c;来让我们相互学习&#x1f3ce;️&#x1f3ce;️&#x1f3ce;️ int main() {int a[4] { 1, 2, 3, 4 };int* ptr1 (int*)(&a 1);int* ptr2 (int*)((int)a 1);printf("%x,%…

连锁品牌如何引流获客?小魔推短视频矩阵助你流量爆棚

近几年因为大环境的影响&#xff0c;大多数实体行业的生意都不太好做&#xff0c;为了帮助更多实体行业提升品牌知名度&#xff0c;带来更多的流量与转化&#xff0c;餐赞小魔推也在不断的更新迭代&#xff0c;同时考虑到了单门店与连锁品牌使用的便捷性。 目前针对连锁品牌方&…

功能权限篇

文章目录 1. 如何设计一套权限系统1.1 目标1.2 权限模型1.2.1 模型一RBAC1.2.2 模型二ABAC 2.如何实现菜单的创建&#xff1f;2.1 表结构2.2 前端实现2.3 后端实现 3. 如何实现角色的创建&#xff1f;4.如何给用户分配权限 —— 将菜单赋予角色&#xff1f;5.如何给用户分配权限…

【目标跟踪】跨相机如何匹配像素

文章目录 前言一、计算思路二、代码三、结果 前言 本本篇博客介绍一种非常简单粗暴的方法&#xff0c;做到跨相机像素匹配。已知各相机内外参&#xff0c;计算共视区域像素投影&#xff08;不需要计算图像特征&#xff09;。废话不多说&#xff0c;直接来&#xff0c;见下图。…

QT -狗狗管理工具

QT -狗狗管理工具 一、演示效果二、UML三、关键代码四、程序链接 一、演示效果 二、UML 三、关键代码 #include <QFrame> #include <QHBoxLayout> #include <QVBoxLayout> #include <QLabel> #include <QSizePolicy> #include <QDialog> …

算法第十八天-打家劫舍Ⅱ

打家劫舍Ⅱ 题目要求 解题思路 [打家劫舍Ⅱ]是说两个相邻的房间不能同时偷&#xff0c;并且首尾两个房间是相邻的&#xff08;不能同时偷首尾房间&#xff09;明显是基于[打家劫舍Ⅰ]做的升级。[打家劫舍Ⅰ]也是说两个相邻的房间不能同时偷&#xff0c;但是首尾房间不是相邻的…

Nas群晖中安装Cpolar实现内网穿透

1、到Cpolar官网中安装对应的套间 cpolar官网&#xff1a; cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站 2、到群晖nas中安装套间 选择好套间无脑下一步 已完成

时间序列数据的季节性检测

时间序列分析是统计学和数据科学的一个基本研究领域&#xff0c;它为理解和预测序列数据中的模式提供了一个强大的框架。特别是时间序列数据&#xff0c;它捕获连续时间间隔内的信息&#xff0c;使分析师能够揭示趋势&#xff0c;季节性模式和其他时间依赖性。在时间序列分析的…

GPT应用开发:运行你的第一个聊天程序

本系列文章介绍基于OpenAI GPT API开发应用的方法&#xff0c;适合从零开始&#xff0c;也适合查缺补漏。 本文首先介绍基于聊天API编程的方法。 环境搭建 很多机器学习框架和类库都是使用Python编写的&#xff0c;OpenAI提供的很多例子也是Python编写的&#xff0c;所以为了…

PTA(浙大版《C语言程序设计(第3版)》题目集

PTA(浙大版《C语言程序设计&#xff08;第3版&#xff09;》题目集 学习C语言程序设计的PTA题目 目录 PTA(浙大版《C语言程序设计&#xff08;第3版&#xff09;》题目集PTA(浙大版《C语言程序设计&#xff08;第3版&#xff09;》题目集) 习题2-1 求整数均值 (10 分)输入格式:…

JS常用插件 Swiper插件 实现轮播图

Swiper介绍 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架 中文官网地址: https://www.swiper.com.cn/ 点击查看Swiper演示&#xff0c;里面的功能和样式十分丰富&#xff0c;根据自己的需求选择 中文教程中详细介绍了如何使用Swiper API文档中介绍了各个模块以及参…

如何画出优秀的系统架构图-架构师系列-学习总结

--- 后之视今&#xff0c;亦犹今之视昔&#xff01; 目录 早期系统架构图 早期系统架构视图 41视图解读 41架构视图缺点 现代系统架构图的指导实践 业务架构 例子 使用场景 画图技巧 客户端架构、前端架构 例子 使用场景 画图技巧 系统架构 例子 定义 使用场…

C++面试宝典第19题:最长公共前缀

题目 编写一个函数来查找字符串数组中的最长公共前缀,如果不存在公共前缀,返回空字符串""。说明:所有输入只包含小写字母a-z。 示例1: 输入: ["flower", "flow", "flight"]输出: "fl" 示例2: 输入: ["dog",…

微信小程序快速入门03

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

手写springBoot启动器

提示&#xff1a;springboot原理&#xff0c;手写springboot启动器&#xff0c;手写模拟SpringBoot启动过程、手写模拟SpringBoot自动配置功能 文章目录 前言一、本文内容1、手写模拟SpringBoot启动过程2、手写模拟SpringBoot自动配置功能 二、项目总体介绍三、代码实现(手写模…

python的库或函数不会用:使用help函数查看函数

help(time) # 查看time这个库 FUNCTIONS #函数&#xff1b;都可以调用asctime(...)asctime([tuple]) -> string #调用这个函数的参数需要一个元组&#xff08;tuple&#xff09;&#xff0c;->&#xff1a;代表返回值是string类型的#下面是简单的介绍Convert a time tup…

k8s的存储卷、数据卷---动态PV创建

当发布PVC之后可以生成PV&#xff0c;还可以在动态服务器上直接生成挂载目录。PVC直接绑定和使用PV。 动态PV需要两个组件 存储卷插件&#xff1a;Provisioner(存储分配器)根据定义的属性创建PV StorageClass&#xff1a;定义属性 存储卷插件 存储卷插件&#xff1a;k8s本…

ElasticSearch降本增效常见的方法 | 京东云技术团队

Elasticsearch在db_ranking 的排名不断上升&#xff0c;其在存储领域已经蔚然成风且占有非常重要的地位。 随着Elasticsearch越来越受欢迎&#xff0c;企业花费在ES建设上的成本自然也不少。那如何减少ES的成本呢&#xff1f;今天我们就特地来聊聊ES降本增效的常见方法&#x…

服务器和电脑有啥区别?

服务器可以说是“高配的电脑”&#xff0c;两者都有CPU、硬盘、电源等基础硬件组成&#xff0c;但服务器和电脑也是有一定区别的&#xff0c;让小编带大家了解一下吧&#xff01; #秋天生活图鉴# 1、稳定性需求不同&#xff1a;服务器是全年无休&#xff0c;需要高稳定性&…

世微大功率 内置2.5A宽电压降压恒流 LED电源驱动车灯IC AP5193

AP5193是一款PWM工作模式,高效率、外围简单、 内置功率MOS管&#xff0c;适用于4.5-100V输入的高精度 降压LED恒流驱动芯片。电流2.5A。AP5193可实现线性调光和PWM调光&#xff0c;线性调光 脚有效电压范围0.55-2.6V. AP5193 工作频率可以通过RT 外部电阻编程来设定&#xff0c…