网站域名可以更换吗,wordpress 技术类主题,徐州网红有哪些人,有创意营销型网站建设文章目录 一、为什么要用树结构#xff1f;二、使用步骤 1.引入相关json2.树结构的转换总结 一、为什么要用树结构#xff1f;
本文将讲述一个实例#xff0c;构造一棵树来实现数组和tree的转换#xff0c;这在前端树结构中是经常遇到的
后端返回树结构方便管理#xff… 文章目录 一、为什么要用树结构二、使用步骤 1.引入相关json2.树结构的转换总结 一、为什么要用树结构
本文将讲述一个实例构造一棵树来实现数组和tree的转换这在前端树结构中是经常遇到的
后端返回树结构方便管理前端也只需要请求一次接口拿到所有数据
前端树转成数组后的效果图 二、使用步骤
1.引入相关json
代码如下示例请下载资源 2.读入数据
代码如下示例 !--* author:yxm* description复用教材
--
templatediv classwhole-title-bjul classwhole-title v-for(item,index) in Object.keys(dataForm) :keyindexli classtitle-left{{item}}/lili classtitle-rightdivv-for(item2, index2) in dataForm[item]:keyindex2classtitle-right-name common-cursor:class{ activate-index: selectForm[item] item2.tag_id }clickselectClick(item, item2){{ item2.tag_name }}/div/li/ul/div
/templatescript
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);},},
}
/scriptstyle langscss 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总结
使用递归把树转成列表数组使得接口请求一次前端自己组装结构
