Transfer 穿梭框

该博客介绍了Vue.js中Transfer组件的使用,强调了数据结构的要求,数据需为包含id、label和disabled的对象数组。`sourceKeys`属性用于绑定初始或动态的目标列表数据,且`key`字段作为数据的唯一标识。同时,文章提到了如何在`mounted`生命周期钩子中处理后台获取的数据。
摘要由CSDN通过智能技术生成

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

   

<div class="shadow" style="padding:2% 2% 2% 3%;margin-top:2%;height: 430px">
  <el-transfer
    :titles="['用户未所属组', '用户已所属组']"
    @change="handleChange"
    v-model="yhYsszData"
    :data=" yhAllSszData">
  </el-transfer>
</div>

data 定义:

yhAllSszData:[],
yhYsszData:[],

写方法:

methods:{
 
//选取左侧内容,点击右滑图标
handleChange(value, direction, movedKeys) {
  let rightData = value;
  let yssXgzStr = {qx:rightDat
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值