【记录31】elementUI el-tree 虚线、右键、拖拽

文章描述了一个Vue项目中，父组件如何通过eltree组件管理组织机构树结构，包括节点的选择、右击删除操作以及拖拽功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<eltree :treeData="treeData"></eltree>

import eltree from "../../components/tree.vue";
export default {
   
   
    name: '',
    components: {
   
    
        // org_tree ,
        eltree
    },
    watch: {
   
   
        
    },
    data() {
   
   
        return {
   
   
            orgFormchoose: {
   
   },
            orgForm: {
   
    type: 0, limits: 1 },
            operateIndex: 1, // 默认 1  查看
            operateDisable: true,
            treeData: [
                {
   
    parentId: null, id: 1, level: 1, type: null, checkbox: '1', allname: '组织机构1', name:'机构1简称', code:'机构1编码', show: true, 
                    children: [
                        {
   
    parentId: 1, id: 101, level: 2, type: null, checkbox: '2', allname: '组织机构1-1', show: false, },
                        {
   
    parentId: 1, id: 102, level: 2, type: null, checkbox: '3', allname: '组织机构1-2', show: false, },
                    ] 
                },
                {
   
    parentId: null, id: 2, level: 1, type: null, checkbox: '4', allname: '组织机构2', show: true, 
                    children: [
                        {
   
    parentId: 2, id: 201, level: 2, type: null, checkbox: '5', allname: '组织机构2-1', show: false, },
                        {
   
    parentId: 2, id: 202, level: 2, type: null, checkbox: '6', allname: '组织机构2-2', show: false, 
                            children: [
                                {
   
    parentId: 202, id: 2001, level: 3, type: null, checkbox: '7',  allname: '组织机构2-1-1', show: false,
                                    children