element 穿梭框自定义数据记录

最近项目中用到两侧数据交换，想到了element里面的穿梭框来写，因为有使用到自定义数据和现实就记录一下吧

1. 要实现的效果

image.png

因为上方还有选项，实现当选择时间的时候出餐日期就会显示，没有的话就隐藏出餐日期列，所以需要根据条件判断一下是否显示，所以就用到了<span slot-scope="{ option }"></span>来自定义数据项，我本来想用el-row和el-col来布局里面的，最后发现样式显示第二行总是会出现比第一行更宽，样式调理半天未果，就直接用span啦

2. 基本代码

 <el-transfer :titles="[ meanInfoUpdate.name1 ==='指定日期'? title:'菜单名称', meanInfoUpdate.name1 ==='指定日期'? title:'菜单名称']" 
                    v-model="value" 
                    :data="data" 
                    style="margin-left:145px;"
                    @change='changeValue'>
          <span slot-scope="{ option }" >
              <span style="float:left" class="elCol">
                  {{option.label}}
              </span>
              <span style="float:left" v-if="meanInfoUpdate.name1 === '指定日期'">
                  {{option.time}}
              </span>
          </span>
      </el-transfer>

tips:要准备的数据data和value可以自己去设置，这里就不展示啦，跟着文档走就行啦

image.png

3. 因为用到了自定义数据项，就来说一下，自定义的话需要使用 slot-scope 来实现

image.png

 <span slot-scope="{ option }" type="flex">
              <span style="float:left" class="elCol">
                  {{option.label}}
              </span>
              <span style="float:left" v-if="meanInfoUpdate.name1 === '指定日期'">
                  {{option.time}}
              </span>
          </span>
      </el-transfer>

实现效果 出餐时间不显示

image.png

出餐时间显示

image.png