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;同时考虑到了单门店与连锁品牌使用的便捷性。 目前针对连锁品牌方&…

如何利用API接口获取电商平台数据?

作为产品经理&#xff0c;我们需要了解电商平台的数据情况&#xff0c;以便更好地制定产品策略和优化用户体验。而利用API接口获取电商平台数据是一种高效、便捷的方式。本文将从以下几个方面介绍如何利用API接口获取电商平台数据。 一、了解API接口 首先&#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.如何给用户分配权限…

R语言【paleobioDB】——pbdb_strata():通过名称、等级和/或 地理位置选择,返回地质地层的基本信息

Package paleobioDB version 0.7.0 paleobioDB 包在2020年已经停止更新&#xff0c;该包依赖PBDB v1 API。 可以选择在Index of /src/contrib/Archive/paleobioDB (r-project.org)下载安装包后&#xff0c;执行本地安装。 Usage pbdb_strata (...) Arguments 参数【...】&am…

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

文章目录 前言一、计算思路二、代码三、结果 前言 本本篇博客介绍一种非常简单粗暴的方法&#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;但是首尾房间不是相邻的…

在 <script setup> 中使用 defineEmits 触发自定义事件传递数据(子传父)

在子组件中导入 defineEmits&#xff1a;在 <script setup> 的顶部&#xff0c;你需要导入 defineEmits 函数。 import { defineEmits } from vue; 定义自定义事件&#xff1a;使用 defineEmits 函数定义你想要触发的自定义事件。你可以传递一个事件名称的数组作为参数。…

常用的dom操作

常用的dom操作 查找元素&#xff1a;可以使用 getElementById、querySelector、querySelectorAll 等方法来查找元素。创建元素&#xff1a;可以使用 createElement 方法创建新的元素节点。插入元素&#xff1a;可以使用 appendChild、insertBefore 等方法将元素插入到指定位置…

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

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

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

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

rc.local 自动挂载iso

mkdir /mnt/iso echo "/usr/bin/mount -o loop /dev/sr0 /mnt/iso" >> /etc/rc.local tail -1 /etc/rc/local /usr/bin/mount -o loop /dev/sr0 /mnt/iso chmod x /etc/rc.local reboot

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

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

面试 React 框架八股文十问十答第八期

面试 React 框架八股文十问十答第八期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;组件通信的方式有哪些…

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;知行合一 文章目录 前言一、生命周期生…