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>