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> 

2. 样式

<style lang="scss">
  #myTeachInfo {
    
    
   .teach_fill{
    
        // 调整穿梭框宽度
     .el-transfer-panel{
    
    
        width:350px;
      }
     .el-transfer-panel__header{
    
       // 隐藏 统计数字
       .el-checkbox{
    
    
         .el-checkbox__label{
    
    
           span{
    
    
             display: none;
           }
         }
       }
     }
   }
  }
</style>