el-table实现穿梭功能

第一种

javascript 复制代码
<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 = 1
      this.search.page.size = val
      this.getTableList()
    },
    handleCurrentChange (val) {
      this.search.page.current = val
      this.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>

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

javascript 复制代码
<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>
相关推荐
aesthetician3 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手5 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng6 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科7 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20167 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
90后的晨仔9 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
EndingCoder9 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔9 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔9 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀9 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js