当前位置： 首页 > news >正文

el-table实现穿梭功能

news 2025/8/22 22:24:01

 第一种

<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.lryc.cn/news/175558.html

相关文章：

  • Cron表达式_用于定时调度任务
  • CeresPCL ICP精配准（点到面）
  • CentOS安装kafka单机部署
  • 蓝牙核心规范（V5.4）11.2-LE Audio 笔记之LE Auido架构
  • 福建江夏学院蔡慧梅主任一行莅临拓世科技集团，共探AI+时代教育新未来
  • 使用Visual Leak Detector排查内存泄漏问题
  • 如何设计一个 JVM 语言下的 LLM 应用开发框架？以 Chocolate Factory 为例
  • 基础排序算法
  • Nginx的反向代理、动静分离、负载均衡
  • LLM-TAP随笔——大语言模型基础【深度学习】【PyTorch】【LLM】
  • 蓝桥杯备赛-上学迟到
  • 基于 MATLAB 的电力系统动态分析研究【IEEE9、IEEE68系节点】
  • 2023百度之星 题目详解 公园+糖果促销
  • C++ 2019-2022 CSP_J 复赛试题横向维度分析(中)
  • 基于Spring Boot的IT技术交流和分享平台的设计与实现
  • 智算引领·创新未来 | 2023紫光展锐泛物联网终端生态论坛成功举办
  • 网络安全技术指南 103.91.209.X
  • 用flex实现grid布局
  • 东郊到家app小程序公众号软件开发预约同城服务系统成品源码部署
  • kotlin的集合使用maxBy函数报NoSuchElementException
  • Python开发与应用实验2 | Python基础语法应用
  • 网络安全--防火墙旁挂部署方式和高可靠性技术
  • c++最小步数模型（魔板）
  • 【每日一题Day337】LC460LFU 缓存 | 双链表+哈希表
  • 解决老版本Oracle VirtualBox 此应用无法在此设备上运行问题
  • 法规标准-UN R48标准解读
  • 自动化和数字化在 ERP 系统中意味着什么？
  • python nvidia 显卡信息 格式数据
  • LeetCode每日一题：1993. 树上的操作（2023.9.23 C++）
  • 绿色计算产业发展白皮书：2022年OceanBase助力蚂蚁集团减排4392tCO2e