vue 递归组件 + 无限树状列表

需求:需要展示树状,可以无限添加子目录

1创建父组件

	<template>
	  <div>
	    <my-trees :list="list" :key="codeNum"></my-trees>
	  </div>
	</template>
	<script>
	import myTrees from "./child";
	export default {
	  components: {
	    myTrees,
	  },
	  provide() {
	    return {
	      //刷新数据
	      newFoo: this.detail,
	    };
	  },
	  data() {
	    return {
	      list: [],
	      codeNum:1,
	    };
	  },
	  // computed:{
	  //   //数据处理成树形
	  //       treeData(){
	  //         let cloneData = JSON.parse(JSON.stringify(this.catalogList))
	  //         // let cloneData2 = JSON.parse(JSON.stringify(this.data))
	  //         // 对源数据深度克隆
	  //         return cloneData.filter(father=>{
	  //           let branchArr = cloneData.filter(child=>father.catalogId == child.catalogParent)    //返回每一项的子级数组
	  //           branchArr.length>0 ? father.children = branchArr : ''   //如果存在子级，则给父级添加一个children属性，并赋值
	  //           return father.catalogParent==null;      //返回第一层
	  //         });
	  //       }
	  //     },
	  mounted () {
	      this.detail()
	  },
	  methods: {
	    //获取最新数据
	    detail() {
	      this.list = [
	        {
	          name: "白开水111111111",
	          cList: [
	            { name: "二级白开水" },
	            {
	              name: "one chicken",
	              cList: [
	                { name: "三级白开水3333", cList: [{ name: "四级白开水" }] },
	              ],
	            },
	          ],
	        },
	        { name: "2222222222" },
	        {
	          name: "白开水33333333",
	          cList: [{ name: "二级白开水" }, { name: "one chicken" }],
	        },
	      ];
	      //首次加载到父页面只能循环子组件儿组件,需要再刷新一次子组件才会显示孙组件
	    //   if (this.codeNum == 1) {
	    //         var rand = Math.random();
	    //         this.codeNum = rand;
	    //         // console.log("第一次加载调用两次");
	    //       } else {
	    //         // console.log("第n次加载则不用");
	    //       }
	    },
	  },
	};
	</script>
	<style scoped>
	
	</style>

2树状子组件

<script>
export default {
  name: "treeMenus",
  props: {
    list: Array,
  },
  //由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。
  inject: ["newFoo"],
  methods: {
    click() {
        //操作事件后直接刷新父组件更新数据
        this.newFoo();
    },
  },
};
</script>

 <style>
ul {
  padding-left: 20px !important;
  list-style: none;
  text-align: left;
  border: 1px solid rgb(166, 184, 207);
}
ul li{
  border: 1px solid rgb(166, 184, 207);
}
.open {
    padding-left: 20px;
    background-color: antiquewhite;
}
</style>

要素:

1 子组件需要调用父组件刷新操作后的数据,并且因为自组件内会循环组组件,会有孙组件以及更孙组件的情况,因为没用bus,这里用通过provide/inject可以调用祖先组件的数据

2 关于树状数据,因为后端有时候不会给你配好的树状数据,如果是返回的一元数组,类似

{id:1,parentId:0,name:"一级菜单A",rank:1},
            {id:2,parentId:0,name:"一级菜单B",rank:1},
            {id:3,parentId:0,name:"一级菜单C",rank:1},
            {id:4,parentId:1,name:"二级菜单A-A",rank:2},
            {id:5,parentId:1,name:"二级菜单A-B",rank:2},

可以直接用上面父组件的treeData即可转换

3 关于首次加载子组件加载完成孙组件还需调用第二次的问题,可以在调用数据方法里添加随机数实现二次加载.

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天 点击查看活动详情