vue实现左右多选框

先上效果图：

image.png

html部分代码

接口名称：
  

    
    
      搜索
    
  





  

    

    

      
搜索结果：接口名字(接口包名)
      

      
待添加接口
    
    

      

        
          {{api.name}}({{api.packageName}})
        
      
      

        
        
        
        
      
      

        
          {{api.name}}({{api.packageName}})
        
      
    
    
  

js动作

selectAllApi(){
  this.toAddApiList = this.resultApiList;
  this.resultApiList = [];
},
selectOneApi(){
  for(let i=0;i

最后补充数据部分作为参考：

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:[],
}