ElementUI transfer组件设置已选中右侧的值

钱端工程师

已于 2023-04-21 09:26:50 修改

阅读量2.4k

点赞数 1

文章标签： elementui 前端 javascript

于 2023-04-17 10:37:29 首次发布

本文链接：https://blog.csdn.net/qq_68155756/article/details/130194455

版权

文章介绍了如何使用Vue.js的el-transfer组件，特别是关注@change事件及其三个参数：已选值、移动方向和key数组。组件要求数据对象包含id、key和label属性，且key在左右两侧数据中必须唯一。hasBindStore用于存储已绑定的key，确保右侧只能选择左侧存在的值。

摘要由CSDN通过智能技术生成

transfer穿梭框组件的@change事件很关键，玩转此组件就靠事件的三个参数


        <el-transfer
          filterable    //可搜索
          v-model="hasBindStore"    //已绑定的数据
          :titles="['未绑定电表', '已绑定电表']"
          :button-texts="['解绑', '绑定']"   
          :data="storeList"    //所有数据列表
          target-order="push" //数据改变方式，original（跟原数据一致） / push（尾添加） / unshift（头添加）
          @change="changed" //穿梭框改变时间，有三个默认参数：已选值、数据移动的方向 left/ right、发生移动的数据 key 数组
        >
        </el-transfer>

要想设置右侧已选中的值前提是左侧的数据设置成下面这样，一定要有id，key，label这三个值，

然后右侧已选中的值是左侧的key就可以了

storeList:[{
              id: '第1个',
              key: '第1个',
              label: '第1个',
            },{
              id: '第2个',
              key: '第2个',
              label: '第2个',
            },],
//所有数据的每一项的id和key不可重复，用来组件左右移动使用

 hasBindStore:[第1个,第2个],//已绑定的值是key，右侧不能放置左侧不存在的值