el-table实现穿梭功能

 第一种

 
<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>

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

 
<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>