前端uniapp无限分类

在前端开发中，如果你使用的是uni-app框架，实现无限分类可以通过递归的方式来完成。下面是一个简单的示例：

1. 首先，你需要有一个存储分类数据的数组，每个分类对象需要包含一个唯一的ID和一个父级ID。

data() {
  return {
    categories: [
      { id: 1, parentId: 0, name: '分类1' },
      { id: 2, parentId: 0, name: '分类2' },
      { id: 3, parentId: 1, name: '分类1-1' },
      { id: 4, parentId: 1, name: '分类1-2' },
      { id: 5, parentId: 3, name: '分类1-1-1' },
      // 其他分类数据...
    ]
  }
}

2. 创建一个递归组件，用于展示无限分类的数据。

<template>
  <ul>
    <li v-for="category in getChildCategories(0)" :key="category.id">
      {{ category.name }}
      <recursive-category :parent-id="category.id" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'RecursiveCategory',
  props: {
    parentId: {
      type: Number,
      required: true
    }
  },
  methods: {
    getChildCategories(parentId) {
      return this.categories.filter(category => category.parentId === parentId)
    }
  },
  components: {
    RecursiveCategory: {
      name: 'RecursiveCategory',
      props: ['parentId'],
      template: `
        <ul>
          <li v-for="category in getChildCategories(parentId)" :key="category.id">
            {{ category.name }}
            <recursive-category :parent-id="category.id" />
          </li>
        </ul>
      `,
      methods: {
        getChildCategories(parentId) {
          return this.categories.filter(category => category.parentId === parentId)
        }
      }
    }
  }
}
</script>

在以上示例中，我们使用了递归组件 RecursiveCategory 来展示无限分类数据。它接受一个 parentId 属性，根据该属性筛选出当前父级下的子分类，并继续递归调用自身来展示子分类的子分类。

通过这种方式，你可以在uni-app中实现无限分类的展示。当然，你还可以根据实际需求进行样式和功能的扩展。希望对你有所帮助！如有更多问题，请继续提问。