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 = null

    function getParentNode(index) {
        let currentIndex = index - 1
        while (!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)] = item
        last = item
    }
    return res
}

console.log(JSON.stringify(getTree(target.titles)))

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值