elementUI中穿梭框实现单选

因项目需求，修改elementUI穿梭框多选为单选并达不到自己想要的预期效果，故自己封装一个单选的穿梭框组件，直接上代码~~，不足之处望指正。

<div class="transfer_panel transfer_left">
            <p class="transfer_panel_header">文件中的数据库</p>
            <div class="transfer_panel_body">
              <el-radio-group v-model="importdb.filehasdbs">
                <el-radio v-for="dbs in importdb.importdbList" :label="dbs.key">{{dbs.label}}</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="transfer_btn">
            <el-button class="btn" icon="el-icon-arrow-left" @click="toReftChange"></el-button>
            <el-button class="btn" icon="el-icon-arrow-right" @click="toLightChange"></el-button>
          </div>
          <div class="transfer_panel transfer_right">
            <p class="transfer_panel_header" >要导入的数据库</p>
            <div class="transfer_panel_body">
              <el-radio-group v-model="importdb.selectimportdbs" @change="setredbnameChange">
                <el-radio v-for="dbs in importdb.importdbs" :label="dbs.key">{{dbs.label}}</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>

data中绑定的数据为数组对象（因项目需求要修改穿梭框右侧显示的内容）
css中主要的实现部分

.transfer {
    margin: 10px 0;
    .transfer_panel {
      border: 1px solid #EBEEF5;
      border-radius: 4px;
      overflow: hidden;
      background: #FFF;
      display: inline-block;
      vertical-align: middle;
      width: 44%;
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
      max-height: 100%;
      box-sizing: border-box;
      position: relative;
      .transfer_panel_header {
        height: 40px;
        line-height: 40px;
        background: #e7edfa;
        margin: 0;
        padding-left: 15px;
        border-bottom: 1px solid #EBEEF5;
        box-sizing: border-box;
        color: #666;
      }
      .transfer_panel_body {
        height: 155px;
      }
    }
    .transfer_btn {
      display: inline-block;
      vertical-align: middle;
      padding: 0 20px;
      padding-top: 70px;
      .el-button + .el-button {
        margin-left: 0px;
        margin-top: 10px;
      }
      .btn {
        border-radius: 3px;
        padding: 6px 6px;
        display: block;
      }
    }
  }

js主要实现代码如下，大家可以根据自己的需求加入其他逻辑

 toRightChange() {
      let self = this
      if(!this.importdb.selectimportdbs) return
      this.importdb.importdbList.push({label: this.importdb.selectimportdbs, key: this.importdb.selectimportdbs})
      this.importdb.importdbs.map((item,index) => {
        if(item.key == this.importdb.selectimportdbs) {
          this.importdb.importdbs.splice(index,1)
        }
      })
      this.importdb.selectimportdbs = ''
    },
    toLeftChange() {
      if(!this.importdb.filehasdbs) return
      let self = this
      this.importdb.importdbs.push({label: this.importdb.filehasdbs, key: this.importdb.filehasdbs})
      this.importdb.importdbList.map((item,index) => {
        if(item.key == this.importdb.filehasdbs) {
          this.importdb.importdbList.splice(index,1)
        }
      })
      this.importdb.filehasdbs = ''
    },

最终的实现效果如下，就实现一个简单的单选穿梭框：