根据网上查找的资料，vue做递归组件，模仿着写了一个，遇到个问题，用如下json串，{
"data": {
"OrgName": "项目管理",
"menuCode": "",
},
"childTreeNode": [{
"data": {
"OrgName": "项目",
"menuCode": "BusProject",
},
"childTreeNode": []
},
{
"data": {
"OrgName": "人员周报",
"menuCode": "BusProject",
},
"childTreeNode": []
}
]
}
在递归的组件onload时候添加了日志，执行次数和json串里的个数是吻合的，但是跑起来后，却只有根节点，剩余的子节点都不知道哪里去了，是我书写的问题还是有bug啊。求解惑，搞了一整天了没解决。
996上班族 - 996上班族
原本只调试了app的，加了name（红色），测试提出小程序不显示；
参考JS的方式（参考https://www.cnblogs.com/zhaidq/p/11227532.html）换成绿色形式，app上不显示；
最后把红色和绿色代码都加进去，小程序和app都显示了。
妖王令剑 - pcliang
代码 带上
<template>
<view>
<view class="tree-ul" v-for="(item,i) in data" :key="item.code+i">
<view class="isTrue" v-if="item.children">
<view class="tree-item">
<label>{{item.name}}</label>
<span v-if="!opends[i]" @tap="onOpends(item,i)">∨</span>
<span v-if="opends[i]" @tap="onOpends(item,i)">∧</span>
</view>
<tree-item class="children-box" :data="item.children" v-show="opends[i]"></tree-item>
</view>
<view class="tree-item isTrue" v-if="!item.children">
<label>{{item.name}}</label>
</view>
</view></view>
</template>
<script>
export default {
name: "tree-item",
props:{
data: {
type: Array,
default: function(e) {
return []
}
}
},
data() {
return {
opends: [],
};
},
onLoad() {
},
methods:{
onOpends(item,i){
this.$nextTick(function(){
this.$set(this.opends,i,!this.opends[i])
})
}
}
}
</script>
<style>
.tree-box{
display: inline-block;
width: 220px;
border: 1px solid #eee;
overflow: hidden;
border-radius: 4px;
}
.tree-item{
display: flex;
overflow: hidden;
height: 32px;
border-bottom: 1px solid #eee;
}
.tree-item>label{
flex: 1;
line-height: 32px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tree-item>span{
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
}
.isTrue{
padding-left: 15px;
}
</style>
unionw - 忙的天昏地暗
components里插件内部使用做无限级调用时，
<template>
<view>
<view class="list">
<view>
<text @click="toggle" v-if="isFolder" class="iconfont" :class="[open ? 'icon-xiangxia' : 'icon-xiangyou']"></text>
<text v-else class="iconfont icon-pdf"></text>
<text @click="goInfo(model.Id)">{{ model.title }}</text>
</view>
<uni-tag text="4" type="primary" size="small" v-if="tagShow"></uni-tag>
</view>
<view v-show="open" v-if="isFolder" class="list-child"><tree-item v-for="(cel, index) in model.children" :model="cel" :key="index"></tree-item></view>
</view>
</template>
<script>
import uniTag from '@/components/uni-tag/uni-tag.vue';
export default {
name: 'tree-item',
props: ['model', 'utag'],
components: { uniTag },
data() {
return {
open: false,
tagShow: this.utag
};
},
computed: {
isFolder() {
return this.model.children && this.model.children.length;
}
},
methods: {
toggle() {
if (this.isFolder) {
this.open = !this.open;
}
},
goInfo(Id) {
uni.$emit('godetail', {
Id: Id
});
}
}
};
</script>
<style scoped>
page {
background: #fff;
}
.list {
border-bottom: 2upx solid #ddd;
line-height: 80upx;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-left: 20upx;
padding-right: 20upx;
}
.list-child {
padding-left: 40upx;
}
.iconfont {
margin-right: 20upx;
}
</style>
我是在外部进行了一次循环在使用tree-item数据绑定，同样的插件，一个在安卓手机上能使用，然后我复制了此插件。在其他地方需要对树形增加属性显示，两种都要保留。但是原来的是好的，自己的就不行。
测试了好多次，都是不显示二级以下的树。
仔细斟酌每一行的作用，每一个字母的意义，确保没有遗漏。还是不行。
突然想到是不是跟后台一样递归需要重复调用？
就是了组件内引用自己
import uniTag from '@/components/tree-item/tree-item.vue';
竟然能显示子节点了。
敲黑板.....可以试试。
DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位
京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001
side9527
老哥这方法很骚，nice
2020-04-26 15:11
没得好名字
可以帮我看看这个递归吗》一直没显示出来第二层
2020-12-14 14:49
996上班族
回复 没得好名字: 哪个？
2020-12-23 17:54