前言

技术栈：vue + Quasar Framework
在开发的时候想要在树结构里面每个节点数据都能实现某种功能（像表格一样有操作的功能），而且不能确定数据有多少层级。基于后续会想要添加节点间互相拖拽的功能，这里使用UI框架提供的树组件不理想，故用vue写一个。
vue 根据有多个子节点的数据动态生成树结构。

一、思路

写一个树结构的封装组件，因为不知道数据的层级，所以在封装的组件里面调用自身，实现一个自身组件的嵌套，我们只需要在嵌套组件的时候做好有子节点才嵌套，无则不嵌套的判断。

二、封装组件的代码

1.组件里的template

class=“row bg_row” 这种样式的写法是Quasar Framework框架里自带的，需要去看文档，如果没有用这个框架的，样式自己写，这里不用理会。

<template><div id="children_tree"><!-- 将数据正常地循环展示 - 组件传入数据数组 parentTreeData --><div v-for="item in parentTreeData" :key="item.category_id"><div class="row bg_row"><!-- 数据的左边部分 - showHidden点击方法是控制节点是否展开 --><div class="col" @click="showHidden(item)"><iv-if="item.son &&item.son instanceof Array && item.son.length > 0 &&!findTrue(item.category_id)"class="material-icons draicon">arrow_right</i><iv-else-if="item.son &&item.son instanceof Array && item.son.length > 0 &&findTrue(item.category_id)"class="material-icons draicon">arrow_drop_down</i><iv-elseclass="material-icons draicon"style="padding-left: 38px"></i>{{ item.name }}</div><!-- 数据的右边放功能按钮的部分 - 接收传入的功能数组 btnOperates --><div :class="`col-${5}`" style="text-align: right"><q-btnclass="on-left"v-for="(btn, index) in btnOperates":key="`btn_fun_${index}`":label="btn.label || '按钮'":color="btn.color || 'primary'":outline="btn.outline || false":size="btn.size || 'md'"@click="btn.fun(item)"unelevated/></div></div><!-- 调用自己 --><childrenv-if="item.son && findTrue(item.category_id)":key="item.category_id + 10000":parent-tree-data="item.son":tree-data="treeData":btn-operates="btnOperates"style="margin-left: 15px"></children></div></div>
</template>

2.组件里的script

<script>
export default {name: 'children',props: {// 传入数据parentTreeData: {type: Array,default: () => {return []}},// 功能按钮btnOperates: {type: Array,default: () => {return []}}},data() {return {// 用于存储是否展开显示的层级showArr: []}},methods: {// 展开或者隐藏下级目录showHidden(item) {if (this.showArr.includes(item.category_id)) {// 存在this.remove(this.showArr, item.category_id)} else {// 不存在this.showArr.push(item.category_id)}},remove(arr, item) {for (let index = 0; index < arr.length; index++) {const element = arr[index]if (element == item) {arr.splice(index, 1)}}},// 是否展示findTrue(id) {return this.showArr.includes(id)}}
}
</script>

3.style

.bg_row {width: 100%;height: 50px;line-height: 50px;background-color: #eeeeee;color: #000000;margin: 2px 0 2px 0;
}.draicon {font-size: 32px;color: #7e7e7e;padding-left: 6px;
}

三、使用步骤

1.调用组件

<cate-tree:parentTreeData="list":btnOperates="operates"
/>

2.传入数据

import cateTree from './components/cate-tree' // 组件名称自定义哈
export default {components: { cateTree },data() {return {list: [{category_id: 100,name: '父级一',parent_id: 0,son: [{category_id: 103,name: '子级一',parent_id: 100,son: [{category_id: 106,name: '孙级一',parent_id: 103,son: [{category_id: 107,name: '曾孙级一',parent_id: 106}]}]}]},{category_id: 101,name: '父级二',parent_id: 0,son: [{category_id: 104,name: '子级一',parent_id: 101}]},{category_id: 102,name: '父级三',parent_id: 0,son: []}],operates: [{label: '當前分類商品',color: 'primary',size: 'md',outline: true,fun: (row) => {// 放功能方法}},{label: '修改',color: 'primary',size: 'md',outline: false,fun: (row) => {// 放功能方法}},{label: '刪除',color: 'red',size: 'md',outline: false,fun: (row) => {// 放功能方法}}]}}
}

3.实现的效果

如下图（部分展开）

（全部展开）

总结

传入的数据改成是接口获取，因为是组件调用自身，所以不管数据有多少层级，都能渲染。

vue动态生成多级树结构相关推荐

使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
css画表格多级表头,element UI实现动态生成多级表头
一.效果图二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...
Element UI动态生成多级表头
1 基础常用的原型样例我们常常遇到的情况就是表头固定的,我们需要从后端获取对应表头的信息,如果信息比较多的时候为了方便我们展示,可以固定表头和列,下面是一个我们常见的例子: 固定列和表头可以同时使用 ...
vue动态生成多个Echarts图表
vue动态生成多个Echarts图表首先先动态的获取到id <div v-for="(item,index) in chartList" :key="index& ...
VUE之Vxe-table动态生成多级表头及后端返回数据的处理
需求: 1.第一列为正常列: 2.第二列开始为动态生成列(根据接口返回数据生成): 3.最后一列为编辑列. 步骤: 写入动态html模板 <vxe-tableid="prdReques ...
VUE之Vxe-table动态生成多级表头
需求: 1.第一列为正常列: 2.第二列开始为动态生成列(根据接口返回数据生成): 3.最后一列为编辑列. 实现步骤: 模板中定义: <vxe-tablei ...
c# mvc5 view 多层_MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...
基于Element组件下动态生成多级表头以及数据
介绍 element是一套基于vue的组件,本文主要介绍如何根据后端传输数据来动态生成表格. 代码 html 利用vue里的for循环来动态生成表头,再利用if语句判断是否有二级表头,并将对应key赋 ...
vue 动态生成下载二维码
菜花记录 vue项目如何动态生成一个下载二维码项目中二维码动态配置好下载链接,现场直接修改配置就可以调试第一步先直接在终端下载vue插件 npm install vue-qriously --sa ...

vue动态生成多级树结构