当前位置：首页 > VUE

vue实现树形视频

2026-01-16 17:21:50VUE

Vue 实现树形视频列表

在 Vue 中实现树形视频列表可以通过递归组件和嵌套数据结构来完成。以下是具体实现方法：

数据结构设计 使用嵌套数组表示视频分类和子视频，每个节点包含 id、name、children 等属性：

const videoTree = [
  {
    id: 1,
    name: '电影',
    children: [
      { id: 11, name: '动作片' },
      { id: 12, name: '喜剧片' }
    ]
  },
  {
    id: 2,
    name: '电视剧',
    children: [
      { 
        id: 21, 
        name: '国产剧',
        children: [
          { id: 211, name: '古装剧' }
        ]
      }
    ]
  }
]

递归组件实现 创建 VideoTreeNode 组件处理树形渲染：

<template>
  <li>
    {{ node.name }}
    <ul v-if="node.children && node.children.length">
      <VideoTreeNode 
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'VideoTreeNode',
  props: {
    node: Object
  }
}
</script>

主组件调用 在父组件中导入并使用递归组件：

<template>
  <div class="video-tree">
    <ul>
      <VideoTreeNode 
        v-for="item in videoTree"
        :key="item.id"
        :node="item"
      />
    </ul>
  </div>
</template>

<script>
import VideoTreeNode from './VideoTreeNode.vue'

export default {
  components: { VideoTreeNode },
  data() {
    return {
      videoTree: [...] // 树形数据
    }
  }
}
</script>

功能扩展方案

添加展开/折叠功能 在节点组件中添加控制状态：

<template>
  <li>
    <span @click="toggle">
      {{ isOpen ? '▼' : '►' }} {{ node.name }}
    </span>
    <ul v-if="node.children && isOpen">
      <VideoTreeNode 
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

视频播放集成 为叶子节点添加播放功能：

<template>
  <li>
    <span v-if="!node.children" @click="playVideo(node)">
      ▶ {{ node.name }}
    </span>
    <template v-else>
      <!-- 原有折叠逻辑 -->
    </template>
  </li>
</template>

<script>
export default {
  methods: {
    playVideo(video) {
      this.$emit('play', video)
    }
  }
}
</script>

性能优化建议

对于大型树结构，可采用虚拟滚动技术。安装 vue-virtual-scroller：

npm install vue-virtual-scroller

实现示例：

<template>
  <RecycleScroller
    :items="flattenedTree"
    :item-size="32"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div :style="{ paddingLeft: (item.level * 20) + 'px' }">
        {{ item.name }}
      </div>
    </template>
  </RecycleScroller>
</template>

样式增强方案

添加基础样式提升视觉效果：

.video-tree ul {
  list-style: none;
  padding-left: 20px;
}
.video-tree li {
  margin: 5px 0;
  cursor: pointer;
}
.video-tree li span:hover {
  background-color: #f0f0f0;
}

vue实现树形视频