vue實現左右多選框

html部分代碼

<fieldset>
  <table class="table table-bordered dchannel-table">
    <tbody>
    <tr>
      <td><span style="width: 50%;">搜索結果：接口名字(接口包名)</span></td>
      <td style="width: 50px;" valign="middle"></td>
      <td><span style="width: 50%;">待添加接口</span></td>
    </tr>
    <tr class="item-default">
      <td align="right" style="width: 50%;">
        <select id="sel_all_area" multiple="multiple" size="10" style="width:100%;height: 400px">
          <option v-for="api in resultApiList" :value="api.id">{{api.name}}({{api.packageName}})</option>
        </select>
      </td>
      <td style="width: 50px;" valign="middle">
        <button type="button" class="btn btn-default btn-small" id="btn_select_all_area" v-on:click="selectAllApi"><span class="glyphicon glyphicon-forward"></span></button>
        <button type="button" class="btn btn-default btn-small" id="btn_choose_selected_area" v-on:click="selectOneApi"><span class="glyphicon glyphicon-chevron-right"></span></button>
        <button type="button" class="btn btn-default btn-small" id="btn_remove_selected_area" v-on:click="removeOneApi"><span class="glyphicon glyphicon-chevron-left"></span></button>
        <button type="button" class="btn btn-default btn-small" id="btn_remove_all_area" v-on:click="removeAllApi"><span class="glyphicon glyphicon-backward"></span></button>
      </td>
      <td style="width: 50%;">
        <select id="sel_selected_areas"  multiple="multiple" size="10" style="width:100%;;height: 400px">
          <option v-for="api in toAddApiList" :value="api.id">{{api.name}}({{api.packageName}})</option>
        </select>
      </td>
    </tr>
    </tbody>
  </table>
</fieldset>

js動作

selectAllApi(){
  this.toAddApiList = this.resultApiList;
  this.resultApiList = [];
},
selectOneApi(){
  for(let i=0;i<this.resultApiList.length;i++){
    if(this.resultApiList[i].id == $("#sel_all_area").val()){
      this.toAddApiList.push(this.resultApiList[i])
      this.resultApiList.splice(i,1);
    }
  }
},
removeOneApi(){
  for(let i=0;i<this.toAddApiList.length;i++){
    if(this.toAddApiList[i].id == $("#sel_selected_areas").val()){
      this.resultApiList.push(this.toAddApiList[i])
      this.toAddApiList.splice(i,1);
    }
  }
},
removeAllApi(){
  this.resultApiList = this.toAddApiList;
  this.toAddApiList = [];
}

最後補充數據部分作爲參考：

data() {
    return {
      resultApiList:[
        {"id":2,"name":"600014","packageName":"user.LoginService","type":"1","groupName":"USER","creater":"admin","createTime":"2019-07-22 16:34:06","updater":"admin","updateTime":"2019-07-22 16:54:11","remark":"渠道用戶登錄接口"},
        {"id":3,"name":"600015","packageName":"user.LoginService","type":"1","groupName":"USER","creater":"admin","createTime":"2019-07-22 16:34:06","updater":"admin","updateTime":"2019-07-22 16:54:11","remark":"渠道用戶登錄接口"},
        {"id":4,"name":"600016","packageName":"user.LoginService","type":"1","groupName":"USER","creater":"admin","createTime":"2019-07-22 16:34:06","updater":"admin","updateTime":"2019-07-22 16:54:11","remark":"渠道用戶登錄接口"}
      ],
      toAddApiList:[],
}