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

树结构使用实例---实现数组和树结构的转换

文章目录

  • 一、为什么要用树结构
  • 二、使用步骤
    • 1.引入相关json
    • 2.树结构的转换
  • 总结

一、为什么要用树结构?

本文将讲述一个实例,构造一棵树来实现数组和tree的转换,这在前端树结构中是经常遇到的

后端返回树结构方便管理,前端也只需要请求一次接口拿到所有数据

前端树转成数组后的效果图:

二、使用步骤

1.引入相关json

代码如下(示例):请下载资源

2.读入数据

代码如下(示例):


<!--* @author:yxm* @description复用教材 
-->
<template><div class="whole-title-bj"><ul class="whole-title" v-for="(item,index) in Object.keys(dataForm)" :key="index"><li class="title-left">{{item}}</li><li class="title-right"><divv-for="(item2, index2) in dataForm[item]":key="index2"class="title-right-name common-cursor":class="{ 'activate-index': selectForm[item] == item2.tag_id }"@click="selectClick(item, item2)">{{ item2.tag_name }}</div></li></ul></div>
</template><script>
import nationalJson from "./national_lesson_tag.json" //测试export default {name: '',data () {return {dataForm:{},//源数据selectForm:{},//选中当前selectMap:{},}},mounted(){this.initData(nationalJson.hierarchies[0])//测试},methods: {// 初始化数据递归initData(data) {测试let children = data.children;let hierarchy_name = data.hierarchy_name;let item = children[0];let tag_name = item.tag_name;this.$set(this.dataForm, hierarchy_name, children);this.$set(this.selectForm, hierarchy_name, item.tag_id);this.$set(this.selectMap, tag_name, item.tag_name);if(item.hierarchies) {this.initData(item.hierarchies[0]);}},// 点击选择教材selectClick(item, tag) {this.selectForm[item] = tag.tag_id;if(tag.children) {this.initData(tag.children[0]);}console.log(this.selectForm);},},
}
</script><style lang="scss" scoped>
/* @import url(); 引入css类 */
.whole-title-bj {width: 90%;.whole-title {display: flex;flex-wrap: wrap;align-items: baseline;.title-left {margin-right: 25px;color: #999999;}.title-right {width: 90%;display: flex;flex-wrap: wrap;line-height: 30px;&-name {padding: 0 20px;margin-bottom: 16px;margin-right: 20px;color: #000000;}}}.activate-index {color: #1e62ec !important;background: rgba(30, 98, 236, 0.1);border-radius: 17px;font-size: 14px;}
}
</style>

总结

使用递归把树转成列表数组,使得接口请求一次,前端自己组装结构

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

相关文章:

  • 论文阅读_条件控制_ControlNet
  • 全链路数据湖开发治理解决方案2.0重磅升级,全面增强数据入湖、调度和治理能力
  • 【算法题】2769. 找出最大的可达成数字
  • 023:vue中解决el-date-picker更改样式不生效问题
  • 爬虫借助代理会让网速快点吗?
  • 探索智能文字识别:技术、应用与发展前景
  • STL——list用法
  • Linux的基础指令
  • 深入浅出Pytorch函数——torch.nn.init.normal_
  • Vue.js知识点学习的一点笔记
  • Sui第四轮资助:16个团队瓜分
  • ATC模型转换环境问题案例
  • dart其他语法
  • C++11并发与多线程笔记(7) 单例设计模式共享数据分析、解决,call_once
  • FANUC机器人加减速倍率指令ACC的使用方法说明
  • 奥威BI数据可视化工具:360度呈现数据,告别枯燥表格
  • C# Linq源码分析之Take (三)
  • Linux journalctl命令详解(journalctl指令)(systemd服务默认日志管理工具)
  • 学习内容--
  • Stable Diffusion:使用自己的数据集微调训练LoRA模型
  • 软考高级系统架构设计师系列之:论文典型试题写作要点和写作素材总结系列文章一
  • 06 mysql all查询 和 主键查询 和 非索引列查询
  • 黑马点评-项目集成git及redis实现短信验证码登录
  • mac苹果电脑怎么运行Windows软件?怎么安装Win虚拟机?
  • Jmeter对websocket进行测试
  • 从2023年世界机器人大会发现机器人新趋势
  • Kafka单节点部署
  • 生成式AI和大语言模型 Generative AI LLMs
  • Obsidian 入门使用手册
  • GuLi商城-前端基础Vue指令-单向绑定双向绑定