这是我参与更文挑战的第3天，活动详情查看： 更文挑战
接到一个需求，刚刚好跟穿梭框一样，你说巧不巧，毕竟是第一次使用穿梭框里面的坑，咱也没淌过，
体验过程如下：
先说说使用的技术吧，vue.min.js+element ui;
使用基础用法
<el-transfer v-model="value" :data="data"></el-transfer>
</template>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `备选项 ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
value: [1, 4]
};
}
};
</script>
data 表示数据源；（数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一性标识，label 为显示文本，disabled 表示该项数据是否禁止转移）value选定的值(目标列表中的数据项会同步到绑定至 v-model 的变量，值为数据项的 key 所组成的数组)如果不希望初始化状态目标列表不为空时，可以 给v-model变量赋值给一个 初始化的值
由于所有的数据都是动态从接口请求的，需要后台配合，保存 回传的都应该是对象数组；
实际开发中遇见的问题是 ： 首先前台处理的时候，还得避免用户 来回选中取消，如果还得判断选中数量；
解决思路：
首先将后台回传的数据源 进行过滤添加所需要的字段，
其次判断选中数量，根据文档中提供的left-check-change 事件（当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组） 判断数组的长度；进行数组map方法 ，将数组的字段进行重新赋值（disabled）； 最后将v-model绑定的数值 进行再次过滤 返回跟后台约定好的格式； （切记后台跟前台一定要约定好，数据的格式）
遇见一点问题记录一点，记录bug的点点滴滴 如果还遇见其他问题，欢迎跟我一起研究 讨论啊！
