## TransferTree api

> 注意：
> 本组件只提交最下一级元素的key值。

## 实例

```html
<template>
  <div class="demo">
    <transfer-tree 
      :data="list" 
      :targetKeys="targetKeys"
      @on-change="changeKeys"
      ></transfer-tree>
  </div>
</template>

<script>
import TransferTree from "@/components/common/TransferTree";

const list = [];
for (let i = 0; i < 3; i++) {
  let parent = {
    title: "parent " + i,
    key: "p-" + i,
    expand: true,
    selected: false,
    children: []
  };

  for (let j = 0; j < 5; j++) {
    let child = {
      title: "child-" + i + "-" + j,
      key: "child-" + i + "-" + j,
      // disabled: Math.random() > 0.5
    };
    parent.children.push(child);
  }
  list.push(parent);
}

const targetKeys = ["child-0-2", "child-0-3", "child-1-0", "child-1-1"];

export default {
  class:"demo",
  data() {
    return {
      list,
      targetKeys
    };
  },
  methods: {
    changeKeys({selectedKeys, direction, moveKeys, selectedTitles}) {
      console.log(selectedKeys, direction, moveKeys, selectedTitles);
    }
  }
};
</script>
```


## TransferTree props

| 属性           | 说明                                                                | 类型   | 默认值                 |
| -------------- | ------------------------------------------------------------------- | ------ | ---------------------- |
| data           | 数据源，其中的数据将会被渲染到左边一栏中，targetKeys 中指定的除外。 | Array  | []                     |
| targetKeys     | 已经选中的data中最小一级元素的key值集合，这些元素会显示在右侧框中   | Array  | []                     |
| list-style     | 两个穿梭框的自定义样式                                              | Object | {}                     |
| titles         | 标题集合，顺序从左至右                                              | Array  | ['源列表', '目的列表'] |
| operations     | 操作文案集合，顺序从上至下                                          | Array  | []                     |
| not-found-text | 当列表为空时显示的内容                                              | String | 列表为空               |

## TransferTree events
| 事件名    | 说明                           | 返回值                                                                                |
| --------- | ------------------------------ | ------------------------------------------------------------------------------------- |
| on-change | 选项在两栏之间转移时的回调函数 | 返回一个包含四个属性的对象，分别是：selectedKeys, direction, moveKeys, selectedTitles |

- on-change 返回数据说明

| 名称           | 说明                                    | 类型   |
| -------------- | --------------------------------------- | ------ |
| selectedKeys   | 当前右侧tree中存在的最小元素key值数组   | Array  |
| direction      | 当前操作的方向                          | String |
| moveKeys       | 当前操作元素的key值数组                 | Array  |
| selectedTitles | 当前右侧tree中存在的最小元素title值数组 | Array  |

## children

- data数据中children元素的数据结构

| 属性            | 说明                                   | 类型     | 默认值 |
| --------------- | -------------------------------------- | -------- | ------ |
| title           | 元素在tree中显示的标题                 | String   | -      |
| key             | 元素的key值                            | String   | -      |
| expand          | 是否展开直子节点                       | Boolean  | false  |
| disabled        | 禁掉响应                               | Boolean  | false  |
| disableCheckbox | 禁掉 checkbox                          | Boolean  | false  |
| selected        | 是否选中子节点                         | Boolean  | false  |
| checked         | 是否勾选(如果勾选，子节点也会全部勾选) | Boolean  | false  |
| children        | 子节点属性数组                         | Array    | -      |
| render          | 自定义当前节点渲染内容，见示例         | Function | -      |


