How to implement directory by combining Vue with Element-Plus encapsulating recursive components
Most people don't understand the knowledge points of this article "Vue how to combine Element-Plus encapsulation recursive component implementation directory", so Xiaobian summarizes the following contents for everyone, the content is detailed, the steps are clear, and it has certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article "Vue how to combine Element-Plus encapsulation recursive component implementation directory".
preface
Below.
Yes, recursive components can solve my confusion, recursion is nothing more than calling yourself, we write a reasonable component rendering logic, call yourself inside the component, this is recursive components, please see my solution steps!
//str here is the html string generated by MarkdownIt parsing const menu = [...] str.matchAll(/.*/ g)]
effect is as follows
Wrapper function to change the contents of array into parent-child structure//type of each menu in my class menuItem { title: string children?: menuItem[] type: number //type = 1 indicates h2 tag index: number //index indicates the h-th tag constructor corresponding to type title: string, type: number, index: number, children: menuItem[] = [] ) { this.title = title this.children = children this.type = type this.index = index }}export default function (menu: any[]): any[] { //Save all h min tags const arr: menuItem[] = [] const arrIndex: number[] = new Array(7).fill(0) //Used to save nodes from the previous layer. For example, if I am currently traversing an item of type=3, then I need to know which item of type=2 it belongs to.//If there is one, add it to its children. If not, add it to pre[3] const pre = new Array(7).fill(null) //Record which label h min is (e.g. h2) let minType = null for (const item of menu) { const content = item[0] const type = parseInt(content[2]) const title = content.split(//)[1] const menuitem = new menuItem(title, type, arrIndex[type]++) //Determine whether the current type-1 item has content. If so, add it to the children of the previous type. if (pre[type - 1]) { pre[type - 1].children.push(menuitem) } //Reset items of current type pre[type] = menuitem minType = minType ?? type //if it is the smallest h label, insert if (type === minType) { arr.push(menuitem) } } return arr}
The arr result of the conversion is as follows. As you can see, the array holds two top-level directories, and children holds the internal subdirectories.
封装递归组件fold-item（在使用之前不要忘了导入自己哦）import foldItem from './foldItem.vue' //导入自己defineProps({ item: { type: Object, default: () => ({}) }}) .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}::v-deep.el-menu-item { width: 220px; line-height: 30px; height: 30px;}::v-deep.el-sub-menu { width: 220px;}::v-deep .el-sub-menu__title { height: 30px; line-height: 30px;}在foldMenu中使用递归组件import foldItem from './foldItem.vue'defineProps({ menu: { type: Array, default: () => [] }}) 目录 ::v-deep.el-menu { border: none;}.menu-title { text-align: center; margin-bottom: 10px;}使用效果
更复杂的目录结构也能胜任
以上就是关于"Vue怎么结合Element-Plus封装递归组件实现目录"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。
