vue递归组件无限菜单

Question

小白 递归组件

var arr = [{
  "id": 5622,
  "name": "00一般职业",
  "upid": 0,
  "specificjob": 0,
  "code": "",
  "type": "default",
  "company_id": 10,
  "category": 0,
  "child": [
    {
      "id": 5623,
      "name": "0001机关",
      "upid": 5622,
      "specificjob": 0,
      "code": "",
      "type": "default",
      "company_id": 10,
      "category": 0,
      "child": [
        {
          "id": 5624,
          "name": "机关团体内勤人员",
          "upid": 5623,
          "specificjob": 1,
          "code": "000101",
          "type": "default",
          "company_id": 10,
          "category": 1
        },
        {
          "id": 5625,
          "name": "机关团体外勤人员（从事联系工作）",
          "upid": 5623,
          "specificjob": 1,
          "code": "000102",
          "type": "default",
          "company_id": 10,
          "category": 1
        }
      ]
    },
    {
      "id": 5626,
      "name": "0002工厂、企业",
      "upid": 5622,
      "specificjob": 0,
      "code": "",
      "type": "default",
      "company_id": 10,
      "category": 0,
      "child": [
        {
          "id": 5627,
          "name": "工厂负责人、私营企业主（不亲自作业）",
          "upid": 5626,
          "specificjob": 1,
          "code": "000201",
          "type": "default",
          "company_id": 10,
          "category": 1
        },
        {
          "id": 5628,
          "name": "工厂、企业部门经理\\主管（不亲自作业）",
          "upid": 5626,
          "specificjob": 1,
          "code": "000202",
          "type": "default",
          "company_id": 10,
          "category": 1
        },
        {
          "id": 5629,
          "name": "工厂、企业一般内勤（不从事危险工作）",
          "upid": 5626,
          "specificjob": 1,
          "code": "000203",
          "type": "default",
          "company_id": 10,
          "category": 1
        }
      ]
    }
  ]
}]

这里需要ul > li 无限级像ztree那样的效果。傻一天了也没弄明白 >_<

<template>
  <ul class="list">
    <li v-for="(item,index) in list" :key="index" class="list-item">
      <div class="list-text">{{item.name}}</div>
      <protrzz :list="item.child" />
    </li>
  </ul>
</template>

<script>
export default {
  name: "protrzz",
  props: {
    list: Array,
    required: true
  },
  data() {
    return {
    };
  }
};
</script>

<style lang="less" scoped>
.list {
  padding-left: 15px;
}
.list-text {
  font-size: 16px;
  padding: 15px 0;
}
</style>

现在所有的数据都有了，问题在于，有可能有些只有一级，child可能是空的，然后我想所有的子级都默认隐藏，只有点击的时候展示，再点击再隐藏，然后只有一级的或者是最后一级的点击的时候把id值和name值拿到~~ 求助求助！！！！ >_<

Answer 1

这个组件需要在全局注册 然后才能在组件里调用自己
slot槽的写法采用 2.6.0+新规范 老版本的可以参考一下vue的文档

//main.js
Vue.component('inf-list', infList)

// infList.vue
<template>
  <ul class="list" v-if="list && list[0]">
    <li v-for="(i, no) in list" :key="no" class="list-item">
      <slot :item="i"></slot>
      <inf-list :list="i.child || []">
        <template #default="{item: subItem}">
          <slot :item="subItem"></slot>
        </template>
      </inf-list>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'inf-list',
  props: {
    list: Array
  }
}
</script>

<style lang="scss" scoped>
.list{
  padding-left: 1em;
}
</style>

// *.vue 在其他地方的调用
<inf-list :list="listData">
    <template #default="{item:i}">
        <span>{{i.name}}</span>
    </template>
</inf-list>

Answer 2

写个树形组件就行了。
之前写过一个可以参考下：http://wintc.top/article/13。

Answer 3

// 子组件

<template lang="pug">
  li
    ....
    ul.param-tree(v-if="param.hasChild")
      sub-param.item(
        v-for="(item, index) in param.child",
      )
</template>
<script>

export default {
  name: 'subParam',
}

// 父级调用

ul.tree-root
  sub-param.item(
    v-for="(item, index) in renderList",
    :param="item",
  )