vue实现多标题穿梭框

1，html部分

 <el-col :span="24">
                    <el-row>
                      <el-col
                        :span="11"
                        style="border: 1px solid #0000001f; padding: 10px"
                      >
                        <p>请选择检查专项：</p>
                        <el-table
                          :data="data1"
                          height="300px"
                          ref="selection"
                          @selection-change="checkAll"
                          style="width: 100%"
                        >
                          <el-table-column type="selection" width="30">
                          </el-table-column>
                          <el-table-column type="index" label="序号" width="50">
                          </el-table-column>
                          <el-table-column prop="name" label="账号" width="120">
                          </el-table-column>
                          <el-table-column prop="address" label="注册日期">
                          </el-table-column>
                        </el-table>
                      </el-col>
                      <el-col :span="2">
                        <div class="opSetting">
                          <div @click="handelSelect">
                            <el-button
                              icon="el-icon-d-arrow-right"
                              :disabled="nowSelectData.length ? false : true"
                              type="primary"
                            >
                            </el-button>
                          </div>
                          <div class="spacing" @click="handleRemoveSelect">
                            <el-button
                              icon="el-icon-d-arrow-left"
                              :disabled="
                                nowSelectRightData.length ? false : true
                              "
                              type="primary"
                            >
                            </el-button>
                          </div>
                        </div>
                      </el-col>
                      <el-col
                        :span="11"
                        style="border: 1px solid #0000001f; padding: 10px"
                      >
                        <p>已选择检查专项：</p>
                        <el-table
                          :data="selectArr"
                          height="300px"
                          ref="selection"
                          @selection-change="checkRightAll"
                          style="width: 100%"
                        >
                          <el-table-column type="selection" width="30">
                          </el-table-column>
                          <el-table-column type="index" label="序号" width="50">
                          </el-table-column>
                          <el-table-column prop="name" label="账号" width="120">
                          </el-table-column>
                          <el-table-column prop="address" label="注册日期">
                          </el-table-column>
                        </el-table>
                      </el-col>
                    </el-row>
                  </el-col>

2,data部分

 current: 0,
      steps: [
        {
          title: "受检科室",
          content: "受检科室",
        },
        {
          title: "关联检查表设置",
          content: "关联检查表设置",
        },
      ],
      selectArr: [
        { name: "1", address: "2" },
        { name: "1", address: "2" },
      ],
      data1: [
        { name: "1", address: "2" },
        { name: "1", address: "2" },
      ],
      nowSelectData: [],
      nowSelectRightData: [],

3，js部分

next() {
      this.current++;
    },
    prev() {
      this.current--;
    },
    checkAll(val) {
      this.nowSelectData = val;
    },
    checkRightAll(val) {
      this.nowSelectRightData = val;
    },
    // 选中
    handelSelect() {
      debugger;
      //右边的数组和左边的数组进行连接
      this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData);
      //删除左边数组中的元素
      this.handleRemoveTabList(this.nowSelectData, this.data1);
      this.nowSelectData = [];
    },
    // 取消
    handleRemoveSelect() {
      this.data1 = this.handleConcatArr(this.data1, this.nowSelectRightData);
      this.handleRemoveTabList(this.nowSelectRightData, this.selectArr);
      this.nowSelectRightData = [];
    },
    handleConcatArr(selectArr, nowSelectData) {
      let arr = [];
      arr = arr.concat(selectArr, nowSelectData);
      return arr;
    },
    //在全局中删除被选中的元素
    handleRemoveTabList(isNeedArr, originalArr) {
      //如果两个数组都不为空
      if (isNeedArr.length && originalArr.length) {
        for (let i = 0; i < isNeedArr.length; i++) {
          for (let k = 0; k < originalArr.length; k++) {
            debugger;
            if (isNeedArr[i]["name"] === originalArr[k]["name"]) {
              originalArr.splice(k, 1);
            }
          }
        }
      }
    },

最终呈现

1655347560(1).png