前端vue用jsmind写思维导图

16,547次阅读

共计 11264 个字符，预计需要花费 29 分钟才能阅读完成。

1、下载依赖


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

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

2、完整代码：

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 写思维导图
注意：数据格式看对，里面 topic 很重要；
最后感谢阅读如果有不足之处请指出

原文地址: 前端 vue 用 jsmind 写思维导图

正文完

发表至：开发笔记

2024-10-07

0

转载说明：

1 本网站名称：优杰开发笔记
2 本站永久网址：https://yojack.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站所有内容均可转载及分享, 但请注明出处
6 我们始终尊重原创作者的版权，所有文章在发布时，均尽可能注明出处与作者。
7 站长邮箱：laylwenl@gmail.com

HTML5基础语法与标签

vue最强table vxe-table 虚拟滚动列表前端导出

java生成echarts图片并且下载到本地

彻底抛弃 jQuery ，不然还留着过年？

vue 实现点击复制文本到剪贴板