elementui中穿梭框的使用
ElementUI是一套基于Vue.js的UI框架，其中包含了很多实用的组件，包括穿梭框组件。穿梭框是一个可以将一组数据从一个列表移动到另一个列表的交互组件。在本文中，我们将深入探讨ElementUI中穿梭框的使用。
1. 安装和引入
首先，我们需要在项目中安装ElementUI。可以通过npm或yarn来安装，命令如下：
npm install element-ui --save
yarn add element-ui
安装完成后，在入口文件中引入ElementUI：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
2. 简单的使用
接下来，我们可以在组件中使用穿梭框了。首先，需要在组件的data中声明两个数组，分别代表左侧和右侧的数据源：
data() {
return {
leftList: [{
key: '1',
label: '选项1',
},
{
key: '2',
label: '选项2',
},
{
key: '3',
label: '选项3',
}],
rightList: [],
};
}
然后，在template中声明穿梭框组件，并绑定左侧和右侧的数据源：
<el-transfer
v-model="rightList"
:titles="['左侧列表', '右侧列表']"
:left-list="leftList"
:right-list="rightList"
></el-transfer>
如上所示，我们可以通过v-model来绑定右侧列表的数据，titles用来设置左右两个列表的标题，left-list和right-list用来绑定左右两个列表的数据源。
3. 进阶用法
上述使用方法比较简单，但ElementUI的穿梭框组件还提供了很多高级用法，我们可以通过
配置相关属性来实现。下面将列举一些常用的配置：
3.1. 搜索功能
在大量数据的情况下，用户可能需要搜索来筛选数据。为了实现搜索功能，我们需要配置filterable属性为true，并绑定一个回调函数：
<el-transfer
v-model="rightList"
:titles="['左侧列表', '右侧列表']"
:left-list="leftList"
:right-list="rightList"
:filterable="true"
:filter-method="handleFilter"
></el-transfer>
methods: {
handleFilter(query, list) {
return list.filter(item => LowerCase().LowerCase()) > -1);
},
}
如上所示，我们通过handleFilter方法来进行搜索，其中query代表搜索框的值，list代表需要搜索的数组。在方法中，我们可以使用filter函数来对数组进行筛选，返回符合条件的数据。
3.2. 分页功能
当数据量非常大时，我们可以通过分页功能来优化用户体验。要使用分页功能，我们需要配置prop属性，来设置分页相关的属性：
elementui登录界面
<el-transfer
v-model="rightList"
:titles="['左侧列表', '右侧列表']"
:left-list="leftList"
:right-list="rightList"
:prop="{
key: 'key',
label: 'label',
data: 'data',
total: 1000,
}"
></el-transfer>
如上所示，我们通过prop属性来配置相关信息，其中key代表数据的唯一标识，label代表数据的展示字段，data代表数据集合，total代表数据总数量。在配置完毕后，ElementUI会自动为穿梭框生成分页器，用户可以点击分页器进行跳转。