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>