el-table实现穿梭框效果

需求：做个一左一右的穿梭框，就是数据交换，使用el-transfer虽然可以实现，但是要做多列表形式的实现不了，所以使用el-table实现

实现效果如下图：

点击左边选中后点击按钮移到右边列表

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

1.data中的样式

      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);
            }
          }
        }
      }
    }

最后附上css样式

::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;
    }
  }
}

这样就实现了穿梭框效果，文章到此结束希望对你有所帮助~