# 双树操作

## 导入使用

```code[javascript]
import seTreeTransfer from "ss-universal-client-web/comp/data/su-tree-transfer";
```


```text
this.$refs.doubleTreeObj.init(treeDataLeft,treeDataRight);
treeData:[
    {
        id:"id",
        label:"name",
        children:[...]
        parent:null||item,//第一级的parent为null
    }
    ...
]

数据返回：
添加选中$refs.doubleTreeObj.moveCheckFromLeft()
全部添加$refs.doubleTreeObj.moveAllFromLeft()
删除选中$refs.doubleTreeObj.moveCheckFromRight()
全部添加$refs.doubleTreeObj.moveAllFromRight()
```


### 基本用法
:::demo 
```html
<template>
    <div>
        <el-button @click="init()">初始化</el-button>
        <el-button @click="getDataByMethod('getLeftTreeData')">获取左侧树数据</el-button>
        <el-button @click="getDataByMethod('getLeftNodes')">获取左侧节点数组</el-button>
        <el-button @click="getDataByMethod('getRightTreeData')">获取右侧树数据</el-button>
        <el-button @click="getDataByMethod('getRightNodes')">获取右侧节点数组</el-button>
        <br/>
        <br/>
                    
        <su-tree-transfer ref="doubleTreeObj">
            <el-button type="primary" plain icon="el-icon-arrow-right" @click="()=>{$refs.doubleTreeObj.moveCheckFromLeft()}">添加选中</el-button>
            <br/><br/>
            <el-button type="primary" icon="el-icon-arrow-right" @click="()=>{$refs.doubleTreeObj.moveAllFromLeft()}">全部添加</el-button>
            <br/><br/>
            <el-button type="danger" icon="el-icon-arrow-left"  @click="()=>{$refs.doubleTreeObj.moveCheckFromRight()}">删除选中</el-button>
            <br/><br/>
            <el-button type="danger" icon="el-icon-arrow-left"  @click="()=>{$refs.doubleTreeObj.moveAllFromRight()}">全部添加</el-button>
        </su-tree-transfer>
    </div>
</template>

<script>
export default {
    components: { seTreeTransfer },
    data() {
      return {}
    },
    mounted(){
        this.init();
    },
    methods: {
        init() {
            var getTree=function(pid,level,parent){
                level=level||0;
                let data=[];
                if(level<3)
                    for (let i = 0; i < 3; i++) {
                        let id=pid+"-"+i;
                        let item={id,label:pid+"-"+i+"级",item:{},parent};
                        item.children=getTree(id,level+1,item);
                        data.push(item)
                    }
                return data;
            };
            this.getRef("doubleTreeObj").then(function (doubleTreeObj) {
                doubleTreeObj.init(getTree('a'),getTree('b'));
            });
        },
        getDataByMethod(method){
            let data=this.$refs.doubleTreeObj[method]();
            this.$message({message:'请看控制台打印数据', type: 'success'});
            console.log(data);
        }
    }
 };
</script>
```
:::


### Events

| 事件名称 | 说明 | 参数 |
|---------- |-------- |---------- |
| getDataByMethod | 获取节点数组 | 	( getLeftTreeData：左侧树数据  getLeftNodes：左侧节点数组   getRightTreeData：右侧树数据  getRightNodes：右侧树数据) |