11月1日,又是搬砖的一天,让我们红尘作伴,活的潇潇洒洒。。。。。。
html
<template><view class="content"><view><input class="sreachTool" v-model="toolValue"/><van-icon name="search" size="15" class="searchIcon"/> </view><view class="disP" v-if="showTop" @click="backTop()"><image src="../../static/top.png"></image><view class="borderBottom">上一级</view></view><view class="disP" v-for="(item,index) in data" @click="itemMenu(item,index)"><!-- <image src="../../static/img.png"></image> --><van-icon :name="item.icon" size="20"/><view class="borderBottom item" ><view><view>{{item.cat_name}}</view><view class="itemName">{{item.cat_pid}}</view></view><view v-if="item.type==1"><image src="../../static/img.png"></image></view><view class="itemTime" v-if="item.type==2">{{item.cat_time}}</view></view></view></view>
</template>
js
data() {return {data:[],
//模拟后台数据dataJava: [ {"cat_id": 1,"cat_name": "支付","cat_pid": "张三","cat_level": 0,"cat_time": "2023-01-02","icon":"comment-o","type":1,"children": [{"cat_id": 3,"cat_name": "微信支付","cat_pid":"李四","cat_level": 1,"icon":"comment-o","type":1,}]},{"cat_id": 2,"cat_name": "后悔期","cat_pid": "张三","cat_level": 0,"cat_time": '2023-01-02',"icon":"coupon-o","type":2,"children": [{"cat_id": 4,"cat_name": "后悔期1","cat_pid":"李四","cat_level": 1,"icon":"coupon-o","type":2,"children": [{"cat_id": 8,"cat_name": "后悔期1.1","cat_pid":"李四","cat_level": 1,"icon":"coupon-o","type":2,}]},{"cat_id": 8,"cat_name": "后悔期2","cat_pid":"李四","cat_level": 1,"icon":"coupon-o","type":2,}]},{"cat_id": 6,"cat_name": "冻结怎么办","cat_pid": "张三","cat_level": 0,"cat_time": '2023-01-02',"icon":"coupon-o","type":2,}],showTop:false,toolValue:"",currentIndex:[],//当前路径数组}},created() {this.data=this.dataJava},methods: {itemMenu(item,index){if(item.children){//展示上一级按钮this.showTop=truethis.data=item.children //当前展开节点this.currentIndex.push(index); // 展开节点时添加索引到当前路径数组}else{ this.showMenu=false this.$toast('详情页面')}},backTop(){this.currentIndex.pop(); // 收起节点时从当前路径数组移除最后一个索引console.log('pop',this.currentIndex.length)if(this.currentIndex.length==0){this.showTop=false}let currentNode = this.dataJava;for (const index of this.currentIndex) {currentNode = currentNode[index];currentNode = currentNode.children; // 获取上一级目录的子节点数据}this.data=currentNode}}