首页>>表单>>vue穿梭框演示(2019-04-24)

vue穿梭框演示

vue穿梭框演示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="app">  
  2.         <div id="transfer">  
  3.             <div class="tra-left">  
  4.                 <div class="tra-header">  
  5.                     <div class="tra-header-left"><i class="tra-pointer" :class="selectIconLeft" @click="allInitSelect" aria-hidden="true"></i></div>  
  6.                     <div class="tra-header-center">全部成员</div>  
  7.                     <div class="tra-header-right">{{leftSelectNum}} / {{initNum}}</div>  
  8.                 </div>  
  9.               <div class="tra-tab">  
  10.                     <div class="tra-tab-pic" :class="leftActive==1 ? 'activeBottom':''" @click="changeLeftTab(1)">按姓名排序</div>  
  11.                     <div class="tra-tab-pic" :class="leftActive==2 ? 'activeBottom':''"  @click="changeLeftTab(2)">按工号排序</div>  
  12.                 </div>  
  13.                 <div class="tra-search">  
  14.                     <input type="text" class="form-control" v-model="traLeftInput"/>  
  15.                     <span class="fa fa-search searchicon"  aria-hidden="true"></span>  
  16.                 </div>  
  17.                 <div class="tra-content" v-show="!leftEmpty">  
  18.                     <div class="tra-item" v-for="item in initList" v-if="item.isSearch">  
  19.                         <i class="tra-pointer tra-icon fa" :class="item.type ? 'fa-check-square-o':'fa-square-o'" @click="selectLeft(item.id)" aria-hidden="true"></i>  
  20.                         <span>{{item.name}}</span>  
  21.                   </div>  
  22.               </div>  
  23.                 <div class="tra-empty-content" v-show="leftEmpty">  
  24.                     无数据  
  25.                 </div>  
  26.             </div>  
  27.             <div class="tra-center">  
  28.                 <button class="btn" type="button" @click="toRight" :disabled="leftDisabled" :class="leftDisabled ? '': 'btn-primary'"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button>  
  29.                 <button class="btn" type="button" @click="toLeft" :disabled="rightDisabled" :class="rightDisabled ? '': 'btn-primary'"><i class="fa fa-angle-double-left" aria-hidden="true"></i></button>  
  30.             </div>  
  31.             <div class="tra-right">  
  32.                 <div class="tra-header">  
  33.                     <div class="tra-header-left"><i class="tra-pointer" :class="selectIconRight" @click="allTargetSelect" aria-hidden="true"></i></div>  
  34.                     <div class="tra-header-center">选中成员</div>  
  35.                     <div class="tra-header-right">{{rightSelectNum}} / {{targetNum}}</div>  
  36.                 </div>  
  37.               <div class="tra-tab">  
  38.                     <div class="tra-tab-pic" :class="rightActive==1 ? 'activeBottom':''" @click="changeRightTab(1)">按姓名排序</div>  
  39.                     <div class="tra-tab-pic" :class="rightActive==2 ? 'activeBottom':''" @click="changeRightTab(2)">按工号排序</div>  
  40.                 </div>  
  41.                 <div class="tra-search">  
  42.                     <input type="text" class="form-control" v-model="traRightInput"/>  
  43.                     <span class="fa fa-search searchicon"  aria-hidden="true"></span>  
  44.                 </div>  
  45.                 <div class="tra-content" v-show="!rightEmpty">  
  46.                     <div class="tra-item" v-for="item in targetList" v-if="item.isSearch">  
  47.                         <i class="tra-pointer tra-icon fa" :class="item.type ? 'fa-check-square-o':'fa-square-o'" @click="selectRight(item.id)" aria-hidden="true"></i>  
  48.                         <span>{{item.name}}</span>  
  49.                   </div>  
  50.               </div>  
  51.                 <div class="tra-empty-content" v-show="rightEmpty">  
  52.                     无数据  
  53.                 </div>  
  54.             </div>  
  55.         </div>  
  56.         <!-- 获取最后的值 -->  
  57.         <div style="text-align:center;margin-top:30px">  
  58.             <button class="btn btn-primary" type="button" @click="save">提交</button>  
  59.         </div>  
  60.     </div>  

 


原文地址:http://www.freejs.net/article_biaodan_746.html