Element-UI组件

Transfer 穿梭框

案例

基本使用(摘自官网)

<template>
  <el-transfer v-model="value" :data="data"></el-transfer>
</template>
<script>
  export default {
    data() {
      return {
        // 数据源
        data:,
        // 被选中的数据
        value: [1, 4]
      };
    }
  };
</script>

Transfer 的数据通过 data 属性传入。数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一性标识，label为显示文本，disabled表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至v-model的变量，值为数据项的key所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为v-model 绑定的变量赋予一个初始值。

补充说明

1、data的最基本格式:

data:[
    {
        key: 1,
        label: "选项名称"
    },
    {},
    ...
]

2、data数据源

​ 错误理解：data是 左边列表的数据 ，value是 右边列表的数据。

​ 正解：data数据源是全部的数据，包括选中和未选中的数据。

3、value的值

​ 错误理解：value值是 由被选择的对象 在全部数据 的对象数组中的下标值 而组成的数组。

​ 正解：value的值是 由被选择的对象的key属性 而组成的数组。