Element el-transfer 穿梭框详解

超、凢脫俗 2022-09-16 04:55 622阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 基本用法
 *  3. 可搜索
 *  4. 自定义标题和按钮的文本
 *  5. 设置数据项别名
 *  6. 小结

# 1. 前言 #

穿梭框就是左右各有一个复选框列表，可以将左侧选中的项目移动到右边，后者将右侧的选中项移回左边的控件。

一般用于物品交接等场景，本篇就来介绍下穿梭框的用法。

# 2. 基本用法 #

先看代码：

基本用法:{
       {value}}
        <el-transfer v-model="value" :data="preData" @change="selectChange"></el-transfer>

preData: [{
        
            key: 1,
            label: '北京',
            disabled: false
          },
          {
        
            key: 2,
            label: '上海',
            disabled: false
          },
          {
        
            key: 3,
            label: '广州',
            disabled: true
          }],
          value: [],

methods: {
        
        selectChange(value) {
        
          console.log(value);
        }
      }

解释下，data属性用来绑定数据来源，key表示绑定的唯一标志，label是显示到穿梭框中的值，而disabled决定该数据项能否被移动（disabled为true时表示禁用，此时该数据项为灰色无法移动）。

value属性是选中项key的数组，当数据项被移动到右侧时，其key值被加入value数组中。

最后@change表示选中项发生变化时触发的方法。上述代码效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16]

# 3. 可搜索 #

有时候数据项比较多，可以使用`filterable`属性开启搜索功能。

可搜索：
        <el-transfer filterable v-model="value" :data="preData"></el-transfer>

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]

# 4. 自定义标题和按钮的文本 #

可以自定义列表标题和按钮显示的文本：

自定义标题和按钮名称：
        <el-transfer :titles="['候选城市', '选中城市']" :button-texts="['左移', '右移']" v-model="value" :data="preData"></el-transfer>

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]

# 5. 设置数据项别名 #

当我们的数据是来源于数据库时，此时后台返回的JSON数据可能并不是使用key/label/disabled这样的名称。

此时我们可以利用`props`属性自定义数据项的别名。

数据项别名:
        <el-transfer v-model="value" :data="dbData" :props="{
          key: 'id',
          label: 'name',
          disabled:'disabled'
          }"></el-transfer>

所以上述代码可以绑定如下数据：

dbData: [{
        
            id: 1,
            name: '北京',
            disabled: false
          },
          {
        
            id: 2,
            name: '上海',
            disabled: false
          },
          {
        
            id: 3,
            name: '广州',
            disabled: true
          }],

# 6. 小结 #

穿梭框使用场景不算多，有一个基础的了解就足够了。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/66733cb2c0994cafa8399ea51ec39d18.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/87d1b7d6f5364f439c6a2a616455041c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/70364b2dc8b849c0a51e732f073f386b.png