element提供的穿梭框满足不了项目要求，手写一个吧

<template>
  <div class="usereq">
    <el-row :gutter="10">
      <el-col :span="14"><div class="grid-content">全部设备</div></el-col>
      <el-col :span="2"><div class="grid-content"></div></el-col>
      <el-col :span="8"><div class="grid-content">已选设备</div></el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="14">
         <div class="left_content">
            <el-row :gutter="10">
              <el-col :span="7">
                <el-select v-model="condition_equipment" multiple placeholder="全部设备">
                  <el-option
                    v-for="item in condition_equipmentArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="7">
                <el-select v-model="condition_area" multiple placeholder="全部区域">
                  <el-option
                    v-for="item in condition_areaArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="10">
                <el-input style="border-radius:5px;" v-model="equipment[2]"  placeholder="搜索" prefix-icon="el-icon-search"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="padding:20px 0;margin-bottom:0;border-top:1px solid #323541;border-bottom:1px solid #323541;">
              <el-col class="center" :span="3"><el-checkbox class="grid-content able_checkbox" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></el-col>
              <el-col :span="1"><div class="grid-content"></div></el-col>
              <el-col :span="7"><div class="grid-content">设备编号</div></el-col>
              <el-col :span="6"><div class="grid-content">设备类型</div></el-col>
              <el-col :span="2"><div class="grid-content">区域</div></el-col>
              <el-col :span="5"><div class="grid-content"></div></el-col>
            </el-row>
            <el-checkbox-group v-model="checkedleft" @change="handleCheckedLeftChange">
              <el-row v-for="(equipmentInfos, index) in equipmentInfo" :key="index" :gutter="10" style="margin:0;padding:10px 0;border-bottom:1px solid #323541;">
                <div v-if="equipmentInfos.warn">
                  <el-col class="center" :span="3">
                    <el-checkbox class="prohibit_checkbox" disabled :label="equipmentInfos" :key="equipmentInfos.number"></el-checkbox>
                  </el-col>
                  <el-col :span="1"><div class="grid-content grid-Prohibit">{{index+1}}</div></el-col>
                  <el-col :span="7"><div class="grid-content grid-Prohibit">{{equipmentInfos.number}}</div></el-col>
                  <el-col :span="6"><div class="grid-content grid-Prohibit">{{equipmentInfos.type}}</div></el-col>
                  <el-col :span="2"><div class="grid-content grid-Prohibit">{{equipmentInfos.area}}</div></el-col>
                  <el-col :span="5"><div class="grid-content grid-Prohibit">{{equipmentInfos.warn}}</div></el-col>
                </div>
                <div v-else>
                  <el-col class="center" :span="3">
                    <el-checkbox class="able_checkbox" :label="equipmentInfos" :key="equipmentInfos.number"></el-checkbox>
                  </el-col>
                  <el-col :span="1"><div class="grid-content">{{index+1}}</div></el-col>
                  <el-col :span="7"><div class="grid-content">{{equipmentInfos.number}}</div></el-col>
                  <el-col :span="6"><div class="grid-content">{{equipmentInfos.type}}</div></el-col>
                  <el-col :span="2"><div class="grid-content">{{equipmentInfos.area}}</div></el-col>
                </div>
              </el-row>
            </el-checkbox-group>
         </div>
      </el-col>
      <el-col :span="2">
        <div class="center_content">
          <div class="center_content_r">
            <div class="rule_btn rule_btn_left" icon="el-icon-plus" type="warning" @click="PutDataToRight()">
              <img src="./img/left.png">
            </div>
           <div style="margin-top:20px" class="rule_btn rule_btn_right" icon="el-icon-plus" type="warning" @click="PutDataToLeft()">
              <img src="./img/left.png">
           </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="left_content">
            <el-row :gutter="10" style="padding:20px 0;margin-bottom:0;border-bottom:1px solid #323541;">
              <el-col class="center" :span="6"><el-checkbox class="grid-content able_checkbox" :indeterminate="risIndeterminate" v-model="rcheckAll" @change="rhandleCheckAllChange">全选</el-checkbox></el-col>
              <el-col :span="4"><div class="grid-content"></div></el-col>
              <el-col :span="14"><div class="grid-content">设备编号</div></el-col>
            </el-row>
            <el-checkbox-group v-model="rcheckedleft" @change="rhandleCheckedLeftChange">
              <el-row v-for="(requipmentInfos, index) in requipmentInfo" :key="index" :gutter="10" style="margin:0;padding:10px 0;border-bottom:1px solid #323541;">
                  <el-col class="center" :span="6">
                    <el-checkbox class="able_checkbox" :label="requipmentInfos" :key="requipmentInfos.number"></el-checkbox>
                  </el-col>
                  <el-col :span="4"><div class="grid-content">{{index+1}}</div></el-col>
                  <el-col :span="14"><div class="grid-content">{{requipmentInfos.number}}</div></el-col>
              </el-row>
            </el-checkbox-group>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      equipment: ['', '', ''], // 查询条件
      checkAll: false,
      isIndeterminate: true,
      checkedleft: [],
      rcheckAll: false,
      risIndeterminate: true,
      rcheckedleft: [],
      condition_equipment: '',
      condition_area: '',
      condition_equipmentArr: [], // 查询条件code
      condition_areaArr: [],
      equipmentInfo: [
        {
          number: 'AHU-L28-01',
          type: 'AHU',
          area: 'L55'
        },
        {
          number: 'AHU-L28-02',
          type: 'AHU',
          area: 'L55',
          warn: '数据不足'
        },
        {
          number: 'AHU-L28-03',
          type: 'AHU',
          area: 'L55'
        }
      ],
      requipmentInfo: [
        {
          number: 'AHU-L28-05',
          type: 'AHU',
          area: 'L55'
        }
      ]
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedleft = val ? this.equipmentInfo : []
      this.isIndeterminate = false
    },
    handleCheckedLeftChange(v) {
      const checkedCount = v.length
      this.checkAll = checkedCount === this.equipmentInfo.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.equipmentInfo.length
    },
    rhandleCheckAllChange(val) {
      this.rcheckedleft = val ? this.requipmentInfo : []
      this.risIndeterminate = false
    },
    rhandleCheckedLeftChange(v) {
      const checkedCount = v.length
      this.rcheckAll = checkedCount === this.requipmentInfo.length
      this.risIndeterminate = checkedCount > 0 && checkedCount < this.requipmentInfo.length
    },
    PutDataToRight() {
      console.log(JSON.parse(JSON.stringify(this.checkedleft)))
      this.requipmentInfo = this.handleConcatArr(this.requipmentInfo, this.checkedleft)
      this.handleRemoveTabList(this.checkedleft, this.equipmentInfo)
      console.log(this.equipmentInfo)
      this.checkedleft = []
    },
    PutDataToLeft() {
      this.equipmentInfo = this.handleConcatArr(this.equipmentInfo, this.rcheckedleft)
      this.handleRemoveTabList(this.rcheckedleft, this.requipmentInfo)
      this.rcheckedleft = []
    },
    handleConcatArr(selectArr, nowSelectData) {
      let arr = []
      arr = arr.concat(selectArr, nowSelectData)
      return arr
    },
    handleRemoveTabList(checkArr, originalArr) {
      for (const item of checkArr) {
        if (originalArr.indexOf(item) > -1) {
          this.$nextTick(() => {
            originalArr.splice(originalArr.indexOf(item), 1)
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.usereq{
  .el-row{
      margin: 20px 0 !important;
    }
   .grid-content,.grid-Prohibit {
    text-align: center;
    color: #fff;
    font-size: 16px;
    border-radius: 4px;
    min-height: 36px;
  }
  .grid-Prohibit {
    color: #414346;
  }
   .grid-content /deep/.el-checkbox__label{
     font-size:16px;
   }
  .left_content{
    height:500px;
    padding:0 20px 20px 20px;
    overflow-y: auto;
    background: #020913;
    border-radius:5px;
  }
  .center_content{
    height:500px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:5px;
  }
  .el-select,/deep/ .el-input--small .el-input__inner{
      color:#616B80;
      width:100%;
      background: #152841;
      border-color:#152841;
      border-radius: 5px;
  }
  /deep/ .el-checkbox-group .el-checkbox__label{
    display: none;
  }
  .able_checkbox /deep/ .el-checkbox__inner {
    border-color: #868692;
    background: #020913;
  }
  .prohibit_checkbox /deep/.el-checkbox__inner{
    border-color: #414346;
    background: #020913;
  }
  .center{
    text-align: center;
  }
  .center_content_r{
    width:75%;
    height:180px;
  }
  .rule_btn{
    width:100%;
    height:60px;
    background:#152841;
    float:left;
    border:none;
  }
  .rule_btn_left, .rule_btn_right{
    background: #152841;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius:3px;
  }
  .rule_btn_left img{
   transform:rotate(180deg);
  }
  .rule_btn_left:hover, .rule_btn_right:hover{
    background:#1E3A5F
  }
}

</style>