el-table实现穿梭功能

 第一种

<template><el-row :gutter="20"><el-col :span="10"><!-- 搜索 --><div class="search-bg"><YcSearchInput title="手机号" v-model="search.phone" /><div class="search-submit"><el-button type="primary" @click="getTableList(1)" class="m-r-10">查询</el-button><el-button @click="clearSearch()">重置</el-button></div></div><!-- 穿梭框左边 --><el-table ref="multipleTable" :data="tableData1" height="300" tooltip-effect="dark" style="width: 100%" @select="checkLeft" @select-all="checkAll" class="el-table-dialog" row-key="id"><el-table-column type="selection" width="55" align="center" /><el-table-column type="index" label="序号" min-width="160" /><el-table-column prop="phone" label="手机号" min-width="160" /><el-table-column prop="nickName" label="姓名" min-width="160" /><el-table-column prop="id" label="样本ID" min-width="160" /></el-table><!-- 翻页 --><el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="search.page.current" :page-sizes="$store.state.pageSizes" :page-size="search.page.size" :layout="$store.state.layout" :total="tableTotal" /></el-col><!-- 按钮 --><el-col :span="4" class="el-btn-dialog"><el-button @click="right" type="primary" :disabled="nowSelectData.length ? false : true" icon="el-icon-arrow-right">加入右侧</el-button><el-button @click="left" type="primary" :disabled="nowSelectRightData.length ? false : true" icon="el-icon-arrow-left" style="margin-left: 0;margin-top: 10px;">加入左侧</el-button></el-col><el-col :span="10"><!-- 搜索 --><div class="search-bg"><YcSearchInput title="手机号" v-model="phoneRight" /><div class="search-submit"><el-button type="primary" @click="searchBtn()" class="m-r-10">查询</el-button><el-button @click="resetBtn()">重置</el-button></div></div><!-- 穿梭框右边 --><el-table ref="multipleTable" :data="tableData2" height="300" tooltip-effect="dark" style="width: 100%" @select="checkRight" @select-all="checkRightAll" row-key="id" class="el-table-dialog"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column type="index" label="序号" min-width="160" /><el-table-column prop="phone" label="手机号" min-width="160" /><el-table-column prop="nickName" label="姓名" min-width="160" /><el-table-column prop="id" label="样本ID" min-width="160" /></el-table></el-col></el-row>
</template><script>
export default {data () {return {search: {phone: '',page: {current: 1,size: 10}},tableTotal: 0,tableData1: [],tableData2: [],nowSelectData: [], // 左边选中列表数据nowSelectRightData: [], // 右边选中列表数据phoneRight: ''}},mounted () {this.getTableList()},methods: {// 获取左侧数据getTableList () {this.tableData1 = [{ phone: "111", nickName: "张三", id: "1" },{ phone: "222", nickName: "李四", id: "2" },{ phone: "333", nickName: "王五", id: "3" },{ phone: "444", nickName: "翠花", id: "4" },{ phone: "555", nickName: "小花", id: "5" },{ phone: "666", nickName: "佚名", id: "6" }]},// 右边查询searchBtn () {const tableData2 = JSON.parse(localStorage.getItem('tableData2'))if (this.phoneRight === '' || !this.phoneRight) {this.tableData2 = tableData2} else {this.tableData2 = tableData2.filter(item => item.id.indexOf(this.phoneRight) > -1)}},// 右边重置resetBtn () {this.phoneRight = ''this.tableData2 = JSON.parse(localStorage.getItem('tableData2'))},// 重置clearSearch () {this.search = {phone:'',page: {current: 1,size: 10}}this.getTableList()},/*** 分页*/handleSizeChange (val) {this.search.page.current = 1this.search.page.size = valthis.getTableList()},handleCurrentChange (val) {this.search.page.current = valthis.getTableList()},// 左边全选事件checkAll (row) {this.nowSelectData = row;},// 右边全选事件checkRightAll (row) {this.nowSelectRightData = row;},// 左边选中事件checkLeft (row) {this.nowSelectData = row;},// 右边选中事件checkRight (row) {this.nowSelectRightData = row;},// 点击去右边right () {this.tableData2 = this.tableData2.concat(this.nowSelectData);this.handleRemoveTabList(this.nowSelectData, this.tableData1);// 按钮禁用this.nowSelectData = [];localStorage.setItem('tableData2', JSON.stringify(this.tableData2))},// 点击去左边left () {this.tableData1 = this.tableData1.concat(this.nowSelectRightData);this.handleRemoveTabList(this.nowSelectRightData, this.tableData2);// 按钮禁用this.nowSelectRightData = [];},// 方法handleRemoveTabList (isNeedArr, originalArr) {if (isNeedArr.length && originalArr.length) {for (let i = 0; i < isNeedArr.length; i++) {for (let k = 0; k < originalArr.length; k++) {// 注意,nickName为唯一值,如果不为唯一值那么会出错if (isNeedArr[i]["nickName"] === originalArr[k]["nickName"]) {console.log("-----------1111");originalArr.splice(k, 1);}}}}}}
}
</script><style lang="less" scoped>
::v-deep .el-table-dialog {border: 1px solid #e8e6e6;thead {// color: black;th {background-color: #f4f4f4;.cell {font-weight: bold;}}th:last-child {text-align: center;}}
}
.search-bg {margin: 0 !important;
}
</style>

第二种,只是纯表单穿梭,没有其他功能

<template><el-row :gutter="20"><el-col :span="10"><!-- 穿梭框左边 --><el-table ref="multipleTable" :data="tableData1" height="300" tooltip-effect="dark" style="width: 100%" @select="checkLeft" @select-all="checkAll" class="el-table-dialog" row-key="id"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column type="index" label="序号" align="center"></el-table-column><el-table-column label="编号" align="center"><template slot-scope="{ row }"><span>{{ row.nickName }}</span></template></el-table-column><el-table-column label="类型" align="center"><template slot-scope="{ row }"><span>{{ row.nickName }}</span></template></el-table-column></el-table></el-col><el-col :span="4" class="el-btn-dialog"><el-button @click="right" type="primary" :disabled="nowSelectData.length ? false : true" icon="el-icon-arrow-right">加入右侧</el-button><el-button @click="left" type="primary" :disabled="nowSelectRightData.length ? false : true" icon="el-icon-arrow-left" style="margin-left: 0;margin-top: 10px;">加入左侧</el-button></el-col><el-col :span="10"><!-- 穿梭框右边 --><el-table ref="multipleTable" :data="tableData2" max-height="300" tooltip-effect="dark" style="width: 100%" @select="checkRight" @select-all="checkRightAll" row-key="id" class="el-table-dialog"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column type="index" label="序号" align="center"></el-table-column><el-table-column label="编号" align="center"><template slot-scope="{ row }"><span>{{ row.nickName }}</span></template></el-table-column><el-table-column label="类型" align="center"><template slot-scope="{ row }"><span>{{ row.nickName }}</span></template></el-table-column></el-table></el-col></el-row>
</template><script>
export default {data () {return {tableData1: [{ phone: "132344", nickName: "张三", id: "1" },{ phone: "132344", nickName: "李四", id: "2" },{ phone: "132344", nickName: "王五", id: "3" },{ phone: "132344", nickName: "翠花", id: "4" },{ phone: "132344", nickName: "小花", id: "5" },{ phone: "132346", nickName: "佚名", id: "6" }],tableData2: [],nowSelectData: [], // 左边选中列表数据nowSelectRightData: [], // 右边选中列表数据}},methods: {// 左边全选事件checkAll (row) {this.nowSelectData = row;},// 右边全选事件checkRightAll (row) {this.nowSelectRightData = row;},// 左边选中事件checkLeft (row) {this.nowSelectData = row;},// 右边选中事件checkRight (row) {this.nowSelectRightData = row;},// 点击去右边right () {this.tableData2 = this.tableData2.concat(this.nowSelectData);this.handleRemoveTabList(this.nowSelectData, this.tableData1);// 按钮禁用this.nowSelectData = [];},// 点击去左边left () {this.tableData1 = this.tableData1.concat(this.nowSelectRightData);this.handleRemoveTabList(this.nowSelectRightData, this.tableData2);// 按钮禁用this.nowSelectRightData = [];},// 方法handleRemoveTabList (isNeedArr, originalArr) {if (isNeedArr.length && originalArr.length) {for (let i = 0; i < isNeedArr.length; i++) {for (let k = 0; k < originalArr.length; k++) {// 注意,nickName为唯一值,如果不为唯一值那么会出错if (isNeedArr[i]["nickName"] === originalArr[k]["nickName"]) {console.log("-----------1111");originalArr.splice(k, 1);}}}}}}
}
</script><style lang="less" scoped>
::v-deep .el-table-dialog {border: 1px solid #e8e6e6;thead {// color: black;th {background-color: #f4f4f4;.cell {font-weight: bold;}}th:last-child {text-align: center;}}
}
</style>

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

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

相关文章

Spring面试题21:说一说Spring的@Required注解和@Qualifier注解

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:说一说Spring的@Required注解 @Required ,用于标记在注入的属性上。它表示被注解的属性在配置 Bean 的时候是必需的,如果没有正确配置,则会抛出…

C# OpenCvSharp 基于直线检测的文本图像倾斜校正

效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp;namespace OpenCvSharp_基于直线检测的文…

一文了解亚马逊云科技适用于 Amazon Lightsail 的托管数据库

Amazon Lightsail 是亚马逊云科技提供的一种易上手使用、月度价格经济实惠&#xff0c;并包括了计算实例、容器、存储、数据库的虚拟专用服务器。在创建时可以进行业务蓝图选择&#xff0c;可选择包含多种操作系统&#xff08;Linux/Windows 等&#xff09;或操作系统加上典型应…

深入剖析Redis系列- Redis数据结构之哈希

1.11.5哈希类型(hash) Redis的hash 是一个string类型的key和value的映射表&#xff0c;这里的value是一系列的键值对&#xff0c;hash特别适合用于存储对象。 哈希类型的数据操作总的思想是通过key和field操作value&#xff0c;key是数据标识&#xff0c;field是域&#xff0c;…

“全景江西·南昌专场”数字技术应用场景发布会 | 万广明市长莅临拓世集团展位,一览AIGC科技魅力

随着数字技术的迅猛发展&#xff0c;传统产业正在发生深刻的变革&#xff0c;新兴产业蓬勃兴起。但要想实现数字经济超常规发展&#xff0c;就要在数字产业化上培育新优势&#xff0c;大力实施数字经济核心产业提速行动&#xff0c;加快推进“一核三基地”建设。在这个数字经济…

[vulntarget靶场] vulntarget-c

靶场地址&#xff1a; https://github.com/crow821/vulntarget 拓扑结构 信息收集 主机发现 netdiscover -r 192.168.111.0/24 -i eth0端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.131访问80端口&#xff0c;发现为Laravel v8.78.1框架 vulmap探测…

打造本地紧密链接的开源社区——KCC@长沙开源读书会openKylin爱好者沙龙圆满举办...

2023年9月9日&#xff0c;由开源社联合 openKylin 社区举办的 KCC长沙开源读书会&openKylin 爱好者沙龙&#xff0c;在长沙圆满举办。这是 KCC长沙首次正式进入公众视野&#xff0c;开展开源交流活动&#xff0c;也是 openKylin 社区长沙首场线下沙龙。长沙地区及其周边的众…

浏览器截图扩展增加快捷键

Tabshot – 下载 &#x1f98a; Firefox 扩展&#xff08;zh-CN&#xff09; 最近一个用户找到我&#xff0c;想要这个浏览器扩展有一个快捷键截图功能。 我找了一下&#xff0c;发现火狐扩展的确支持快捷键 研究源码 about:support 配置文件夹&#xff0c;打开文件夹。 附…

uniapp实现点击按钮分享给好友

<button class"share" open-type"share">分享</button>import {onLoad,onShareAppMessage,onShareTimeline} from dcloudio/uni-app onLoad(() > {//设置Menus菜单&#xff0c;使 发送给朋友/分享到朋友圈 两个按钮可以使用wx.showShareMen…

Ubuntu 安装Nacos

1、官网下载最新版nacos https://github.com/alibaba/nacos/releases 本人环境JDK8&#xff0c;Maven3.6.3&#xff0c;启动Nacos2.2.1启动失败&#xff0c;故切换到2.1.0启动成功 2、放到服务器目录下&#xff0c;我的在/home/xxx/apps下 3、解压 $ tar -zxvf nacos-serve…

安装docker、docker-compose

安装docker、docker-compose 文章目录 安装docker、docker-compose一、切换国内镜像源二、安装docker三、安装docker-compose 一、切换国内镜像源 vi /etc/docker/daemon.json {"registry-mirrors": ["https://registry.hub.docker.com","http://hu…

【蓝桥杯选拔赛真题63】Scratch云朵降雨 少儿编程scratch图形化编程 蓝桥杯选拔赛真题解析

目录 scratch云朵降雨 一、题目要求 编程实现 二、案例分析 1、角色分析

【用MyEclipse2017创建一个Hibernate Web登录项目】

用MyEclipse2017创建一个Hibernate Web登录项目 靠手工实现JavaBean/JDBC的系统 Hibernate自动生成了所需的JavaBean&#xff0c;也取代了原JDBC的功能&#xff01;可简单形象地理解为&#xff1a;Hibernate&#xff1d;JavaBean&#xff0b;JDBC 1、创建一个Java EE Web项目…

开机自启动Linux and windows

1、背景 服务器由于更新等原因重启&#xff0c;部署到该服务上的响应的应用需要自启动 2、Linux 2.1 方式一 编写启动应用的sh脚本授权该脚本权限 chmod 777 xxx.sh 修改rc.loacl 位置&#xff1a;/etc/rc.local 脚本&#xff1a;sh /home/xxxx.sh & 授权rc.local …

【周赛364-单调栈】美丽塔 II-力扣 2866

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

短视频无人直播双端开播源码部署

设置语音 商家可以通过语音库&#xff0c;完成直播间语音设置&#xff0c;支持人声录制和智能配音直播间语音 语音库 语音库列表 语音库名称 语音库 录音 合成配音 进入“语音库” 可编辑、删除语音库 列表右下角-添加语音库-输入语音库名称 针对每个语音库&#…

FairMOT 论文学习

1. 解决了什么问题&#xff1f; 现有的多目标跟踪方案将目标检测和 reID 任务放在一个网络里面优化学习&#xff0c;计算效率高。目标检测首先在每一帧中检测出兴趣目标&#xff0c;要么将其与现有的轨迹关联起来&#xff0c;要么创建一个新的轨迹。这两个任务会相互竞争&…

图像练习-计算平行线距离opencv(03)

原图 //对输入图像进行细化 cv::Mat ThinLine(const cv::Mat& matsrc, const int& iterations) {//CvSize size cvGetSize(src);cv::Mat dst matsrc.clone();//拷贝一个数组给另一个数组int _iwidth dst.cols;int _iheight dst.rows;int n 0, i 0, j 0;for (n …

【二分图染色】ARC 165 C

C - Social Distance on Graph 题意&#xff1a; 思路&#xff1a; 首先考虑一条链的情况&#xff0c;注意到如果两条相邻的边加起来 < x&#xff0c;一定不行 这个结论推广到图也是一样的 同时注意到 x 具有单调性&#xff0c;考虑对 x 二分 在check时进行二分图染色 …

三维模型3DTile格式轻量化压缩在移动智能终端应用方面的重要性分析

三维模型3DTile格式轻量化压缩在移动智能终端应用方面的重要性分析 随着移动智能终端设备的不断发展和普及&#xff0c;如智能手机、平板电脑等&#xff0c;以及5G网络技术的推广应用&#xff0c;使得在这些设备上频繁使用三维地理空间数据成为可能。然而&#xff0c;由于这类数…