当前位置：首页 > VUE

vue列表展开实现

2026-01-17 12:48:19VUE

Vue 列表展开实现方法

使用 v-for 和 v-show 控制展开状态

通过 v-for 渲染列表项，配合 v-show 控制子内容的显示隐藏。需要为每个列表项维护一个展开状态。

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <div @click="toggleExpand(item.id)">{{ item.title }}</div>
      <div v-show="expandedItems.includes(item.id)">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, title: '标题1', content: '内容1' },
        { id: 2, title: '标题2', content: '内容2' }
      ],
      expandedItems: []
    }
  },
  methods: {
    toggleExpand(id) {
      const index = this.expandedItems.indexOf(id)
      if (index > -1) {
        this.expandedItems.splice(index, 1)
      } else {
        this.expandedItems.push(id)
      }
    }
  }
}
</script>

使用动态组件实现展开效果

通过动态组件可以更灵活地控制展开内容的显示方式。

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <div @click="currentExpanded = currentExpanded === item.id ? null : item.id">
        {{ item.title }}
      </div>
      <transition name="fade">
        <div v-if="currentExpanded === item.id">
          {{ item.content }}
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, title: '标题1', content: '内容1' },
        { id: 2, title: '标题2', content: '内容2' }
      ],
      currentExpanded: null
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用第三方组件库实现

Element UI 等组件库提供了现成的展开组件，可以快速实现需求。

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item 
      v-for="item in items" 
      :key="item.id" 
      :title="item.title" 
      :name="item.id"
    >
      {{ item.content }}
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [],
      items: [
        { id: 1, title: '标题1', content: '内容1' },
        { id: 2, title: '标题2', content: '内容2' }
      ]
    }
  }
}
</script>

使用 CSS 过渡效果增强用户体验

为展开动作添加平滑的过渡效果，提升用户体验。

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <div @click="toggleExpand(item.id)" class="title">
        {{ item.title }}
      </div>
      <div 
        class="content" 
        :class="{ 'expanded': expandedItems.includes(item.id) }"
      >
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<style>
.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.content.expanded {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}
</style>

以上方法可以根据具体需求选择使用，从简单到复杂提供了多种实现方案。

vue列表展开实现