当前位置: 首页 > news >正文

v-md-editor自定义锚点(生成目录)数组转树结构

接前两篇博文,最终方案终于定了,也把之前做的编辑器模式给否决了,原因是系统中有老的文档需要平替,因此就不能通过编辑器这种模式了,太麻烦了。
最终方案:线下手动pandoc word转markdown,然后将文档保存到前端(图片也在对应路径下)页面上菜单绑定文档,文档中自动生成目录;

issue

v-md-editor群里大佬提供了生成自定义锚点(目录)的方式,但是是数组平铺的,根据级别然后展示的时候通过距离形成视觉上的菜单,但是需求模型上是菜单可点击收缩打开方式的,因此,需要调整该数组为树结构,因为本人纯后端,在朋友帮助下,将数组转为了树

解决方法

//0 1 2 3 代表菜单级别
const target = {"titles": [{"title:": "导读","lineIndex": "1","indent": 0},{"title:":"功能范围","lineIndex":"1","indent":1},{"title:":"寻求帮助","lineIndex":"1","indent":1},{"title:":"业务功能介绍","lineIndex":"1","indent":0},{"title:":"1.二级标题","lineIndex":"1","indent":1},{"title:":"1.1 三级标题","lineIndex":"1","indent":2},{"title:":"1.1.1四级","lineIndex":"1","indent":3},{"title:":"1.2 san级","lineIndex":"1","indent":2},{"title:":"2.四3级","lineIndex":"1","indent":1},{"title:":"2.1四2级","lineIndex":"1","indent":2}]
}function getTree(titles) {const res = []let treeNodeList = []let last = nullfunction getParentNode(index) {let currentIndex = index - 1while (!treeNodeList[currentIndex]) {currentIndex--}return treeNodeList[currentIndex]}for (let i = 0, l = titles.length; i < l; i++) {const item = titles[i]if (item.indent == 0) {res.push(item)treeNodeList = []} else {// 父节点const currentParent = getParentNode(item.indent)if (currentParent.children) {currentParent.children.push(item)} else {currentParent.children = [item]}if (last.indent > item.indent) {treeNodeList = treeNodeList.splice(0, item.indent)}}// 把自己放到节点队列中treeNodeList[Number(item.indent)] = itemlast = item}return res
}console.log(JSON.stringify(getTree(target.titles)))

最终得到的转换后的结构result
ps: 用后端逻辑开发前端真的是不好转换,总想着先去定义对象,结果根本没那么需要,强弱类型的开发方式真的太不同了。

http://www.lryc.cn/news/120952.html

相关文章:

  • java 11 新特效解读(2)
  • linux patch 和 git patch
  • 【vue Dplayer】播放hls视频流
  • 给不蒜子(busuanzi)统计数据增加初始值
  • WebStorm
  • 代码随想录算法训练营day59
  • 大模型训练时间估算
  • 函数的模拟实现
  • CSDN博客批量查询质量分https://yma16.inscode.cc/请求超时问题(设置postman超时时间)(接口提供者设置了nginx超时时间)
  • 什么是 CSRF 攻击?
  • [内网渗透]CFS三层靶机渗透
  • 一百五十一、Kettle——Linux上安装的kettle8.2开启carte服务以及配置子服务器
  • 2023高教社杯数学建模A题 B题C题 D题 E题思路代码分析
  • 从ChatGLM2-6B来看大模型扩展上下文和加速推理相关技术
  • Unity特效总览
  • Unity中人物控制器
  • 零钱兑换-输出组合数
  • Mybatis 小结
  • 【Cartopy】库的安装和瓦片加载(天地图、高德等)
  • TCPDF生成PDF文件,含jpjraph生成雷达图
  • Flink-串讲面试题
  • 如何培养对技术的热爱
  • Vue响应式数据的原理
  • pytest fixture 用于teardown工作
  • 39 printf 的输出到设备层的调试
  • 数字普惠金融、数字创新与经济增长—基于省级面板数据的实证考察(2011-2021年)
  • 控制renderQueue解决NGUI与Unity3D物体渲染顺序问题
  • 概率论与数理统计:第二、三章:一维~n维随机变量及其分布
  • BOLT- 识别和优化热门的基本块
  • Golang 中的 time 包详解(四):函数详解