来回游走的小框框 ”Transfer“

我心飞翔 分类:javascript

这是我参与更文挑战的第3天,活动详情查看: 更文挑战

接到一个需求,刚刚好跟穿梭框一样,你说巧不巧,毕竟是第一次使用穿梭框里面的坑,咱也没淌过,

体验过程如下:

先说说使用的技术吧,vue.min.js+element ui;

image.png

使用基础用法

<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的点点滴滴
如果还遇见其他问题,欢迎跟我一起研究 讨论啊!

回复

我来回复
  • 暂无回复内容