vue(19) : 穿梭框

最新推荐文章于 2026-06-22 17:04:00 发布

转载最新推荐文章于 2026-06-22 17:04:00 发布 · 239 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/szh1127249432/article/details/108080896

标签

#vue.js #javascript #前端 #穿梭框

收录于

前端专栏收录该内容

79 篇文章

订阅专栏

本文介绍如何使用 Element UI 中的穿梭框组件进行动态数据操作，包括设置宽度和高度、双向数据绑定以及监听变化事件等。通过具体代码示例展示了穿梭框的基本用法及其在实际项目中的应用。

参考 :

Elementui穿梭框使用（动态数据）_尚憨憨的博客-CSDN博客_elementui穿梭框

Element穿梭框高宽度调节 - 走看看

<template>
  <el-transfer v-model="yesData" :props="{key: 'id',label: 'name'}" :titles="['待选列表', '已选列表']" @change="handleChange"
    :data="fileArr" />
</template>

<script>
  export default {
    data() {
      return {
        //穿梭框数据列表
        fileArr: [{
            id: 1,
            name: '北京'
          },
          {
            id: 2,
            name: '上海'
          },
          {
            id: 3,
            name: '广州'
          },
          {
            id: 4,
            name: '深圳'
          },
        ],
        //穿梭框id数组
        fileIdArr: [],
        // 注意:key 的字符类型要一致!!!
        yesData: [],
      }
    },
    created() {
      // 回显及已选列表
      this.yesData = [1, 2]
    },
    methods: {
      handleChange(value, direction, movedKeys) {
        this.fileIdArr = movedKeys; //文件列表的id数组
      },
    }
  }
</script>
<style>
  /* 设定穿梭框的宽度与高度 */
  .el-transfer-panel {
    height: 500px;
    width: 400px;
  }

  .el-transfer-panel__list.is-filterable {
    height: 500px;
    width: 400px;
  }
</style>