vue TransferArea用法

Vue TransferArea是一个基于Vue.js的拖拽组件，主要用于数据的双向传递和分组操作，常见于文件上传、任务分配等场景。它通常包含两个列表区域，用户可以在这个区域内拖放元素，并支持自定义分组。

使用步骤大致如下：

1. 安装依赖：首先通过npm或yarn安装`iview`库，因为`TransferArea`是iview中的组件：

   npm install iview

2. 引入组件：在你的Vue组件的`<template>`部分导入`TransferArea`组件：

   <transfer v-model="list" :data源="sourceData" :options="transferOptions"></transfer>

3. 初始化数据：设置`v-model`绑定的数据，如`list`数组，用于存储从源数据传来的元素：

   data() {
     return {
       list: [], // 存储接收过来的数据
       sourceData: [/* 源数据，通常是可拖动的项 */], // 数据源
       transferOptions: {} // 配置选项，例如分组规则
     };
   }

4. 定义配置项：`transferOptions`是一个对象，可以配置如标题、默认分组、是否允许删除等属性：

   computed: {
     transferOptions() {
       return {
         targetKeys: ['group', 'name'], // 指定哪些字段可以作为分组依据
         move: (source, target) => {}, // 自定义拖拽动作处理函数
         remove: (item) => {}, // 自定义移除项处理函数
       };
     }
   }

5. 监听事件：组件会触发一些内置事件，如`on-change`表示数据交换完成，可以根据这些事件做进一步的操作。

methods: {
  onChange(data) {
    console.log('数据交换完成:', data);
  }
}