当前位置：首页 > VUE

vue实现商品树形展示

2026-02-24 19:18:51VUE

实现商品树形展示的方法

在Vue中实现商品树形展示，通常需要结合递归组件或第三方库来处理层级数据。以下是几种常见方法：

使用递归组件

递归组件适合处理嵌套层级不确定的数据结构。假设商品数据格式如下：

const goodsData = [
  {
    id: 1,
    name: "电子产品",
    children: [
      {
        id: 2,
        name: "手机",
        children: [
          { id: 3, name: "iPhone" },
          { id: 4, name: "Android" }
        ]
      }
    ]
  }
]

创建递归组件：

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      {{ item.name }}
      <goods-tree v-if="item.children" :data="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'GoodsTree',
  props: {
    data: Array
  }
}
</script>

使用Element UI的Tree组件

Element UI提供了现成的Tree组件，可以快速实现树形展示：

<template>
  <el-tree
    :data="goodsData"
    :props="defaultProps"
    node-key="id"
    :default-expand-all="true"
  />
</template>

<script>
export default {
  data() {
    return {
      goodsData: [...], // 同上数据结构
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  }
}
</script>

使用Vue虚拟滚动优化性能

对于大型商品树，可以使用vue-virtual-scroll-list优化性能：

<template>
  <virtual-list
    :size="40"
    :remain="20"
    :data-key="'id'"
    :data-sources="flattenData"
  >
    <template v-slot="{ item }">
      <div :style="{ paddingLeft: `${item.level * 20}px` }">
        {{ item.name }}
      </div>
    </template>
  </virtual-list>
</template>

添加交互功能

可以扩展基础树形展示，添加复选框、搜索过滤等功能：

<el-tree
  :data="goodsData"
  show-checkbox
  node-key="id"
  :filter-node-method="filterNode"
  ref="tree"
>
</el-tree>

methods: {
  filterNode(value, data) {
    if (!value) return true
    return data.name.indexOf(value) !== -1
  }
}

处理动态加载

对于大数据量，可以实现懒加载：

loadNode(node, resolve) {
  if (node.level === 0) {
    return resolve([{ name: '根分类', id: 0 }])
  }
  if (node.level > 3) return resolve([])

  // 模拟异步加载
  setTimeout(() => {
    resolve([
      { name: `子分类${node.level}`, id: node.key * 10 + 1 },
      { name: `子分类${node.level}`, id: node.key * 10 + 2 }
    ])
  }, 500)
}

以上方法可根据实际项目需求选择或组合使用，Element UI方案适合快速开发，递归组件方案更灵活，虚拟滚动适合大数据量场景。

vue实现商品树形展示