element-ui之穿梭框的使用以及空行问题

最新推荐文章于 2024-12-03 09:42:56 发布

原创

最新推荐文章于 2024-12-03 09:42:56 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了Element-UI中的穿梭框（Transfer）的基础使用方法，包括数据属性配置，如需要唯一标识符key，显示文本label以及禁止转移的设置。同时，文章针对在使用过程中出现的空行问题提供了解决方案，并引用了相关参考资料进行详细说明。

基础使用

<template>
  <el-transfer :data="data" v-model="value"></el-transfer>
</template>
<script>
data () {
    // data需要包含key跟label。是左边穿梭框所有的数据，value是右边的数据。
    data: [
        {key: '1', label: '苹果'},
        {key: '2', label: '梨'},
        {key: '3', label: '香蕉'},
        {key: '4', label: '橘子'}
    ],
    // value是key组成的数据
    value: ['1', '2'],  // value有值时为左下图所示，会自动从左边分离数据不会重复。
    value: []  // value为空时为右下图所示。
}
</script>