elementui穿梭框使用’
时间: 2023-10-13 22:08:54 浏览: 45
ElementUI的穿梭框(Transfer)组件可以实现两个列表之间的数据交换。具体使用方法如下:
1. 引入Transfer组件
```javascript
import { Transfer } from 'element-ui';
```
2. 在模板中使用Transfer组件,并绑定数据和事件
```html
<el-transfer
v-model="selectedData"
:data="sourceData"
:titles="['源列表', '目标列表']"
@change="handleChange"
></el-transfer>
```
3. 在Vue实例中定义数据和事件处理方法
```javascript
export default {
data() {
return {
sourceData: [
{
key: '1',
label: '选项1'
},
{
key: '2',
label: '选项2'
},
{
key: '3',
label: '选项3'
}
],
selectedData: []
};
},
methods: {
handleChange(targetKeys, direction, moveKeys) {
console.log(targetKeys); // 目标列表的key数组
console.log(direction); // 方向,'left'或'right'
console.log(moveKeys); // 移动的key数组
}
}
};
```
以上是ElementUI穿梭框的基本用法,你可以根据自己的需求进行更多的定制化。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)