来回游走的小框框 ”Transfer“
分类:javascript
这是我参与更文挑战的第3天,活动详情查看: 更文挑战
接到一个需求,刚刚好跟穿梭框一样,你说巧不巧,毕竟是第一次使用穿梭框里面的坑,咱也没淌过,
体验过程如下:
先说说使用的技术吧,vue.min.js+element ui;
使用基础用法
<code class="hljs language- copyable" lang=""> <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的点点滴滴
如果还遇见其他问题,欢迎跟我一起研究 讨论啊!