递归组件

需求：
数据结构

{
    				"deptId":"1000000",
    				"deptName":"xxx",
    				"businessUnit":"CM001",
    				"children":[
    					{
    						"deptId":"1000034",
    						"deptName":"xxx",
    						"businessUnit":"CM001",
    						"need":"Y"
    					}
    				] 			}, 			{
    				"deptId":"1000000",
    				"deptName":"xxx3",
    				"businessUnit":"CM003",
    				"children":[
    					{
    						"deptId":"1000002",
    						"deptName":"xxx",
    						"businessUnit":"CM003",
    						"need":"Y",
    						"children":[
    							{
    								"deptId":"1000101",
    								"deptName":"xxx_金融科技部",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000007",
    								"deptName":"xxx_战略发展部",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000003",
    								"deptName":"xxx_公司领导",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000004",
    								"deptName":"xxx_办公室（执办、企文化办、董办、A办、A宣）48",
    								"businessUnit":"CM003",
    								"need":"Y",
    								"children":[
    									{
    										"deptId":"1000134",
    										"deptName":"xxx_办公室_行政部",
    										"businessUnit":"CM003",
    										"need":"Y"
    									}
    								]
    							},
    							{
    								"deptId":"1000124",
    								"deptName":"xxx_法律合规部",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000102",
    								"deptName":"xxx_多种金融部",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000006",
    								"deptName":"xxx_财务部（产权部）",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000011",
    								"deptName":"xxx_直投部",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000009",
    								"deptName":"xxx_银行部",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000008",
    								"deptName":"xxx_审计中心",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000012",
    								"deptName":"xxx_保险部",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000013",
    								"deptName":"xxx_分析和知识管理中心（自贸办）",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000096",
    								"deptName":"xxx_风险管理部",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000010",
    								"deptName":"xxx_证券部",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000095",
    								"deptName":"xxx_监察部（纪委办公室）",
    								"businessUnit":"CM003",
    								"need":"Y"
    							},
    							{
    								"deptId":"1000005",
    								"deptName":"xxx_人力资源部（A委组织部）",
    								"businessUnit":"CM003",
    								"need":"Y",
    								"children":[
    									{
    										"deptId":"1000136",
    										"deptName":"xxx_人力资源部_科处",
    										"businessUnit":"CM003",
    										"need":"Y"
    									}
    								]
    							}
    						]
    					}
    				] 			},

视图

---------
---------

---

-------
------

实现代码：

// An highlighted block
<template>

  <ul class="treeList">
    <li
      v-for="(item,index) in list"
      :key="index"
      class="treebox"
    >
      <span>
        <img
          src="@/assets/deptIcon.png"
          alt=""
        >
        <em @click="goteamerList(item)">{{item.deptName | fixName  }}</em>
        <van-icon
          name="arrow-up"
          v-show="!item.showMore && item.children"
          @click="changeStatus(item)"
          size="0.4rem"
        />
        <van-icon
          name="arrow-down"
          v-show="item.showMore && item.children"
          @click="changeStatus(item)"
          size="0.4rem"
        /></span>

      <myTrees
        v-if="item.children && !item.showMore"
        :list="item.children"
      ></myTrees>
    </li>
  </ul>

</template>

<script>
export default {
  name: "myTrees",
  props: {
    list: Array
  },
  data() {
    return {
      scopesDefault: [],
      scopes: []
    };
  },
  filters:{
    fixName(value){
      if(value && value.length > 20){
       
        let startStr = value.substring(0,10);
       
        let endStr = value.substr(-9,9);
        return value = startStr+"..."+endStr;
      }else{
        return value;
      }
    }
  },
  methods: {
    changeStatus(item) {
     

      item.showMore = !item.showMore;
    },
    scope() {
      this.list.forEach((item, index) => {
        if ("children" in item) {
          this.$set(item, "showMore", true);
        } else {
          this.$set(item, "showMore", false);
        }
      });
    },
    goteamerList(item) {
      sessionStorage.setItem("deptInfo", JSON.stringify(item));
      this.$router.push({
        name: "teamerList"
      });
    }
  },
  created() {
    this.scope();
  }
};
</script>
<style lang="less" scoped>
.treeList {
  padding: 0;
  margin: 0;
  // padding:0 0.3rem;

  li {
    padding: 0;
    margin: 0;
    line-height: 0.4rem;
    position: relative;
    span {
      display: flex;
      position: relative;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 0.3rem;
      padding: 0.2rem 0;
      border-bottom: 1px solid #eee;
      padding-right: 0.4rem;
      em {
        font-style: normal;
        margin-left: 0.1rem;
        flex: 1;
        // max-width: 92%;
        // overflow: hidden;
        // text-overflow: ellipsis;
      }
      img {
        width: 0.3rem;
        height: 0.3rem;
      }
    }
    i {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
  }
}
</style>