当前位置：个人在线分享 > 前端vue用jsmind写思维导图

前端vue用jsmind写思维导图

作者 : admin 本文共6095个字，预计阅读时间需要16分钟 发布时间： 2024-06-9 共2人阅读

1、下载依赖
 


 npm 安装
npm install --save jsmind
 yarn 安装
yarn jsmind

版本:"jsmind": "^0.4.6",

2、完整代码：


    
    
        
            查看节点
            <!-- 删除节点 -->
            放大
            缩小
            展开：
            
                
                
            
            主题：
            
                
                
             
        
        
        
    

    
         
        名称： {{ obj.topic ? obj.topic : '-' }}
      
       
        部门： {{ obj.orgName ? obj.orgName : '-' }}
      
       
        描述： {{ obj.jobType ? obj.jobType : '-' }}
      
       
        状态：
             正在进行
             已超期
             已审批
             已完成
            
      
       
        开始时间： {{ obj.startDate ? obj.startDate : '-'}}
      
       
        结束时间： {{ obj.endDate ? obj.endDate : '-' }}
    
      
       
        附件： {{ obj.attachment ? obj.attachment : '-'}}
         下载
      
       
        批注：{{ obj.annotation ? obj.annotation : '-'}}
      
        
            
                关 闭
            
        
    

  

  

.jsmind_layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 40px);
    overflow: hidden;

    .jsmind_toolbar {
        width: 100%;
        padding: 0 10px 10px 10px;
        height: auto;
        flex-shrink: 0;
        display: flex;
        align-items: center; 
        flex-wrap: wrap;
        background-color: #f8f9fa;
        box-shadow: 0 0 4px #b8b8b8;
    }

    /deep/ .el-button--medium,
    /deep/ .el-input--medium {
        margin-top: 10px;
    }

    #jsmind_container {
        flex: 1 1 auto;
    }

    /deep/.jsmind-inner {
        overflow: hidden auto !important;
    }

    /deep/.el-upload-list {
        display: none !important;
    }

    /* 隐藏滚动条 */
    .jsmind-inner::-webkit-scrollbar {
        display: none;
    }

    .pad {
        margin-right: 10px;
    }

    .pad-left {
        margin-left: 10px;
    }

    /deep/ jmnode.selected {
        background-color: #b9b9b9;
        color: #fff;
        box-shadow: 2px 2px 8px #777;
    }

    /deep/ jmnode:hover {
        box-shadow: 2px 2px 8px #777;
    }

    .form-con {
        padding-top: 20px;
    }

    .ele-width {
        width: 96%;
    }

    :deep(.el-overlay) {
        display: block !important;
    }
}
.dilogText {
    font-size: 16px;
    margin: 10px 0px;
}

3、数据格式：

{
"manageStartTime": "2024-01-15",
"manageEndTime": "2024-01-18",
"list": [
{
"id": "1749596797626675202",
"parentId": "0",
"children": [
{
"id": "1749596948705505282",
"parentId": "1749596797626675202",
"children": [
{
"id": "1749597460314124290",
"parentId": "1749596948705505282",
"hasChildren": false,
"name": "",
"topic": "1",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "一队1",
"description": "2",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-23 00:00:00",
"endDate": "2024-01-23 00:00:00",
"principal": "詹宁123",
"attachment": "22",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749643728044810241",
"parentId": "1749596948705505282",
"hasChildren": false,
"name": "",
"topic": "1111",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "",
"description": "222",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "",
"endDate": "",
"principal": "",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749644214860898307",
"parentId": "1749596948705505282",
"hasChildren": false,
"name": "",
"topic": "步骤2",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "",
"description": "222",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "",
"endDate": "",
"principal": "",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
}
],
"hasChildren": true,
"name": "",
"topic": "22",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "机关首长",
"description": "22",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-23 00:00:00",
"endDate": "2024-01-24 00:00:00",
"principal": "副局长1号AAAAA",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749644214860898306",
"parentId": "1749596797626675202",
"hasChildren": false,
"name": "",
"topic": "步骤1",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "",
"description": "3333333",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "",
"endDate": "",
"principal": "",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749644351012200449",
"parentId": "1749596797626675202",
"hasChildren": false,
"name": "",
"topic": "步骤1",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "",
"description": "3333333",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "",
"endDate": "",
"principal": "",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
}
],
"hasChildren": true,
"name": "",
"topic": "123",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "首长首长222",
"description": "123",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "2024-01-24 00:00:00",
"endDate": "2024-01-25 00:00:00",
"principal": "canmouyichu",
"attachment": "障碍物数据 (2).xlsx",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749598509187919873",
"parentId": "0",
"children": [
{
"id": "1749598725676920834",
"parentId": "1749598509187919873",
"hasChildren": false,
"name": "",
"topic": "2.1",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "一队1",
"description": "2.1",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-23 00:00:00",
"endDate": "2024-01-24 00:00:00",
"principal": "詹宁123",
"attachment": "22",
"attachmentAddress": "",
"annotation": ""
}
],
"hasChildren": true,
"name": "",
"topic": "2",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "机关首长",
"description": "2",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-24 00:00:00",
"endDate": "2024-01-24 00:00:00",
"principal": "副局长1号AAAAA",
"attachment": "2",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749654320818278402",
"parentId": "0",
"hasChildren": false,
"name": "",
"topic": "222",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "",
"description": "333",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "正在进行",
"startDate": "",
"endDate": "",
"principal": "",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749662052795404290",
"parentId": "0",
"hasChildren": false,
"name": "",
"topic": "步骤2",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "首长首长222",
"description": "2.2",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-23 00:00:00",
"endDate": "2024-01-23 00:00:00",
"principal": "canmouyichu",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
},
{
"id": "1749662644481683457",
"parentId": "0",
"hasChildren": false,
"name": "",
"topic": "2.6",
"key": -1,
"value": -1,
"title": "",
"creatTime": "",
"orgName": "首长首长222",
"description": "2.6",
"jobType": "任务名称任务名称任务名称任务名称任务名",
"remark": "",
"direction": "left",
"stepStatus": "已超期",
"startDate": "2024-01-24 00:00:00",
"endDate": "2024-01-24 00:00:00",
"principal": "canmouyichu",
"attachment": "",
"attachmentAddress": "",
"annotation": ""
}
],
"id": "1746789335255597057",
"topic": "任务名称任务名称任务名称任务名称任务名"
}

4、效果如下：

前端vue用jsmind写思维导图插图

前端vue用jsmind写思维导图插图(1)
注意：数据格式看对，里面topic很重要；
最后 感谢阅读 如果有不足之处 请指出 

本站无任何商业行为
个人在线分享 » 前端vue用jsmind写思维导图
admin

admin 钻石

分享到：

相关推荐

E-->