el-tree双击节点就可以移动到另个table中

在思否上看见关于el-tree双击节点就可以移动到另个table中这个问题问题，自己就写了一下，问题考略的不全面，只是简单地实现了，还有好多问题没有考虑，后来自己想了一下，在节点加入多选框效果是不是一样。但是，这有个难点就是节点双击得效果，这个可以记录一下。实现过程，判断在300ms内第一次点击的节点和第二次点击的节点id相同，300ms内没有第二次点击就把第一次点击的清空。

<template>
    <div>
        <div class="clearfix">
            <div class="fl" style="width:49%;border: solid 1px #ff905d;height:300px;">
                <el-tree
                    :data="data"
                    :default-expand-all="false"
                    node-key="id"
                    ref="casetree"
                    highlight-current
                    :props="defaultPorps"
                    :check-on-click-node="false"
                    @node-click="handleNode"
                >
                    <span class="custom-tree-node" slot-scope="{node,data }">
                        <span v-if="data.children.length > 0">
                            <span class="treeText1">
                                <i class="el-icon-edit"  icon-class="tag"  :w="13"  :h="13" ></i>
                                {{node.label}}
                            </span>
                        </span>
                        <span v-else>
                            {{node.label}}
                        </span>
                    </span>
                </el-tree>
            </div>
            <div class="fr" style="width:49%;border: solid 1px #ff905d;height:300px;">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    height="300px"
                >
                    <el-table-column
                        prop="label"
                        label="等级"
                        width="180"
                    >
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
  </template>
<script>
    export default {
        data(){
            return {
                data: [
                    {
                        id: 1,
                        label: '一级 1',
                        disabled: false,
                        children: [{
                            id: 3,
                            label: '二级 2-1',
                            disabled: false,
                            children: [{
                                id: 4,
                                label: '三级 3-1-1',
                                disabled: false,
                                children: [],
                            }, {
                                id: 5,
                                label: '三级 3-1-2',
                                disabled: false,
                                children: [],
                            }]
                        }, {
                            id: 2,
                            label: '二级 2-2',
                            disabled: false,
                            children: [{
                                id: 6,
                                label: '三级 3-2-1',
                                disabled: false,
                                children: []
                            }, {
                                id: 7,
                                label: '三级 3-2-2',
                                disabled: false,
                                children: []
                            }]
                        }]
                    },{
                        id: 9,
                        label: '一级 2',
                        children: [],
                        disabled: false,
                    }
                ],
                defaultPorps: {
                    children: 'children',
                    label: 'label'
                },
                // 双击事件
                nodeCount:0,
                preNodeId:null,
                curNodeId:null,
                nodeTimer:null,
                // 已选择区域
                tableData:[],
            }
        },
        created(){},
        methods:{
            handleNode(data,node,prop) {
                // console.log(data,node,prop);
                this.nodeCount++
                if( this.preNodeId && this.nodeCount >= 2){
                    this.curNodeId = data.id 
                    this.nodeCount = 0
                    if(this.curNodeId == this.preNodeId){//第一次点击的节点和第二次点击的节点id相同
                        console.log(data,node,prop)
                        console.log('双击,执行代码写在这里');
                        this.tableData.push(data)
                        this.curNodeId = null
                        this.preNodeId = null      
                        return
                    }
                }
                this.preNodeId = data.id
                this.nodeTimer = setTimeout(() => { //300ms内没有第二次点击就把第一次点击的清空
                    this.preNodeId  = null
                    this.nodeCount = 0
                },300)   
            }, 
        }
    }
</script>
<style>
.clearfix:after {
    content: ".";
    height: 0px;
    display: block;
    visibility: hidden;
    clear: both;
}

.clearfix {
    zoom: 1;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
</style>

参考文件：https://blog.csdn.net/weixin_42496800/article/details/121765346