在思否上看见关于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