element-ui穿梭框 簡單應用

el-transfer 穿梭框 踩坑日常： 對于 需要從資料庫擷取大量資料，而采用 這種方式 界面加載非常慢，操作也不流暢

1. 通過 class=“teach_fill” 調整 樣式，自帶 filter-method 不是很實用，通過 class=“transfer-footer” slot=“right-footer” 在底部添加操作按鈕

<el-transfer 
	:titles="['可選教師', '選中教師']" 
	filter-placeholder="請輸入教師姓名" 
	class="teach_fill" 
	filterable 
	v-model="courseInfo.teachIds" 
	:data="courseInfo.teachIdData">
	<el-button class="transfer-footer" slot="right-footer" size="mini" style="margin:5px;" @click="handleTeachCreate(true)">新增教師</el-button>
</el-transfer> 
           

1. 樣式

<style lang="scss">
  #myTeachInfo {
   .teach_fill{    // 調整穿梭框寬度
     .el-transfer-panel{
        width:350px;
      }
     .el-transfer-panel__header{   // 隐藏 統計數字
       .el-checkbox{
         .el-checkbox__label{
           span{
             display: none;
           }
         }
       }
     }
   }
  }
</style>