vue实现数据多级显示

Vue 实现多级数据展示

在 Vue 中实现多级数据展示通常涉及递归组件或嵌套循环。以下是几种常见方法：

递归组件实现

递归组件适合处理不确定层级深度的树形结构数据：

<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

<script>
export default {
  components: {
    TreeNode: {
      name: 'TreeNode',
      props: ['node'],
      template: `
        <div>
          <div>{{ node.name }}</div>
          <div v-if="node.children" style="margin-left: 20px">
            <tree-node 
              v-for="child in node.children" 
              :key="child.id" 
              :node="child"
            ></tree-node>
          </div>
        </div>
      `
    },
    data() {
      return {
        treeData: {
          id: 1,
          name: 'Root',
          children: [
            {
              id: 2,
              name: 'Child 1',
              children: [
                { id: 4, name: 'Grandchild 1' }
              ]
            },
            { id: 3, name: 'Child 2' }
          ]
        }
      }
    }
  }
}
</script>

v-for 嵌套实现

当数据层级固定且不深时，可以直接使用嵌套的 v-for：

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
      <div v-if="item.children" style="margin-left: 20px">
        <div v-for="child in item.children" :key="child.id">
          {{ child.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: 'Parent 1',
          children: [
            { id: 3, name: 'Child 1' }
          ]
        },
        {
          id: 2,
          name: 'Parent 2',
          children: [
            { id: 4, name: 'Child 2' },
            { id: 5, name: 'Child 3' }
          ]
        }
      ]
    }
  }
}
</script>

动态组件实现

对于更复杂的需求，可以使用动态组件结合计算属性：

<template>
  <div>
    <component 
      :is="componentType" 
      v-for="item in processedData" 
      :key="item.id"
      :data="item"
    ></component>
  </div>
</template>

<script>
export default {
  components: {
    ParentItem: {
      props: ['data'],
      template: `
        <div>
          <strong>{{ data.title }}</strong>
          <child-item 
            v-for="child in data.items" 
            :key="child.id"
            :data="child"
          ></child-item>
        </div>
      `
    },
    ChildItem: {
      props: ['data'],
      template: `<div style="margin-left: 20px">{{ data.name }}</div>`
    }
  },
  computed: {
    processedData() {
      return this.rawData.map(item => ({
        ...item,
        componentType: item.type === 'parent' ? 'ParentItem' : 'ChildItem'
      }))
    }
  },
  data() {
    return {
      rawData: [
        {
          id: 1,
          type: 'parent',
          title: 'Main Category',
          items: [
            { id: 2, type: 'child', name: 'Sub Item 1' },
            { id: 3, type: 'child', name: 'Sub Item 2' }
          ]
        }
      ]
    }
  }
}
</script>

使用第三方库

对于复杂树形结构，可以考虑使用专门库如 vue-treeselect：

npm install @riophae/vue-treeselect

<template>
  <treeselect
    :options="options"
    :value="value"
    @input="value = $event"
  />
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  data() {
    return {
      value: null,
      options: [ {
        id: 'a',
        label: 'a',
        children: [ {
          id: 'aa',
          label: 'aa',
        }, {
          id: 'ab',
          label: 'ab',
        } ],
      }, {
        id: 'b',
        label: 'b',
      } ]
    }
  }
}
</script>

性能优化建议

对于大型数据集，考虑使用虚拟滚动技术：

npm install vue-virtual-scroller

<template>
  <RecycleScroller
    class="scroller"
    :items="flattenedData"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div :style="{ paddingLeft: `${item.level * 20}px` }">
        {{ item.name }}
      </div>
    </template>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: { RecycleScroller },
  computed: {
    flattenedData() {
      // 实现将树形数据展平的逻辑
      return this.flattenTree(this.treeData)
    }
  },
  methods: {
    flattenTree(node, level = 0, result = []) {
      result.push({ ...node, level })
      if (node.children) {
        node.children.forEach(child => 
          this.flattenTree(child, level + 1, result))
      }
      return result
    }
  }
}
</script>

以上方法可根据具体需求选择，递归组件适合动态层级，v-for 嵌套适合固定层级，第三方库提供开箱即用的解决方案，虚拟滚动优化大型数据集性能。