vue2.x树状结构（递归）

一、数据结构(无限级)

二、父组件
样式公共部分点这里 https://blog.csdn.net/qq_36529240/article/details/123506889

<div class="anwer-box">
  <TreeList
     :treeItem="treeItem"
     @anwerShow="anwerShow"
     @anwerMyClick="anwerMyClick"
     @problemaZan="problemaZan"
   ></TreeList>
 </div>
 //js
 import TreeList from './treeItem/index.vue'
  components: {
    TreeList,
  },

三、子组件
关键还是子组件循环调用自己
值得注意的地方就是需要加 name: “TreeList”,不然无法区分是调用的自己

<template>
  <div>
    <div v-for="(data, ind) in treeItem" :key="ind">
      <div class="anwer-box-ul">
        <div class="dis-flex justify-between">
          <div class="dis-flex">
            <span class="fs-12">{{ data.numberUserName }}:</span>
            <span class="fs-12" style="padding-left: 15px">{{
              data.content
            }}</span>
          </div>
          <span class="fs-12 cr-999">{{ data.updateTime | timeago }}</span>
        </div>

        <div class="dis-flex justify-between problem-box-right-icon">
          <div class="dis-flex items-center right-icon">
            <div class="" @click="anwerShow(data)">
              {{ data.numberAnswers }}人回答
            </div>
            <div class="dis-flex items-center" @click="problemaZan(data)">
              <span
                class="icon iconfont fs-18"
                :class="{ 'cr-blue': data.isGive == 1 }"
                >&#xec8c;</span
              >
              <span class="num" :class="{ 'cr-blue': data.isGive == 1 }">{{
                data.numberLikes
              }}</span>
            </div>
          </div>
          <div
            class="my-anwer dis-flex items-center"
            v-if="userId != data.memberUserId"
          >
            <span class="icon iconfont cr-999">&#xe635;</span>
            <span class="num fs-14 cr-999" @click="anwerMyClick(data)"
              >我的回答</span
            >
          </div>
        </div>
      </div>
      <TreeList
        class="item"
        v-if="data.flag"
        :key="'son' + data.id"
        :treeItem="data.children"
        @anwerShow="anwerShow(data)"
        @anwerMyClick="anwerMyClick(data)"
        @problemaZan="problemaZan"
      ></TreeList>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeList',
  props: {
    treeItem: {
      type: [],
      default() {
        return []
      },
    },
  },
  data: function () {
    return {
      userId: '',
    }
  },
  computed: {},
  created() {
    this.userId = localStorage.getItem('userId')
    //console.log(this.treeItem)
  },
  methods: {
    anwerShow: function (data) {
      data.flag = !data.flag
      this.$emit('anwerShow', data)
    },
    anwerMyClick(data) {
      this.$emit('anwerMyClick', data)
    },
    problemaZan(data) {
      this.$emit('problemaZan', data)
    },
  },
}
</script>
<style lang="scss" scoped>
 .problem-box-ul {
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
        }
        .problem-box-right {
          width: 760px;
          padding-left: 15px;
          .name {
            font-size: 13px;
            padding-bottom: 10px;
          }
          .problem-box-right-icon {
            padding-top: 20px;
            .right-icon {
              .num {
                padding-left: 5px;
              }

              div {
                cursor: pointer;
                margin-right: 93px;
                font-size: 14px;
                color: #998;

                &:hover {
                  color: #409eff;
                }
              }
            }
            .my-anwer {
              cursor: pointer;
              .num {
                padding-left: 5px;
              }
              &:hover {
                span {
                  color: #409eff;
                }
              }
            }
          }
          
        }
      }
     .anwer-box-ul {
       height: 40px;
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        background: rgba(0, 0, 0, 0.03);
        .problem-box-right-icon {
          padding-top: 8px;
        }
      }

</style>

完结
（后续变动会继续写到其他文章。比如：数据过多卡顿时，接口只返回第一层数据，然后点击按钮，查询子级并插入到父级children）