vue列表展开实现

实现 Vue 列表展开功能

在 Vue 中实现列表展开功能通常需要结合 v-for 和条件渲染（v-if 或 v-show），并通过点击事件切换展开状态。以下是几种常见的实现方式：

基础实现（单个展开）

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <div @click="toggleExpand(index)">{{ item.title }}</div>
      <div v-if="expandedIndex === index">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Item 1', content: 'Content 1' },
        { title: 'Item 2', content: 'Content 2' }
      ],
      expandedIndex: null
    }
  },
  methods: {
    toggleExpand(index) {
      this.expandedIndex = this.expandedIndex === index ? null : index
    }
  }
}
</script>

多项目同时展开

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

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Item 1', content: 'Content 1' },
        { title: 'Item 2', content: 'Content 2' }
      ],
      expandedItems: {}
    }
  },
  methods: {
    toggleExpand(index) {
      this.$set(this.expandedItems, index, !this.expandedItems[index])
    }
  }
}
</script>

使用组件实现

对于更复杂的展开内容，可以封装成组件：

<template>
  <div>
    <expandable-item 
      v-for="(item, index) in items" 
      :key="index" 
      :item="item"
    />
  </div>
</template>

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

export default {
  components: { ExpandableItem },
  data() {
    return {
      items: [
        { title: 'Item 1', content: 'Content 1' },
        { title: 'Item 2', content: 'Content 2' }
      ]
    }
  }
}
</script>

<!-- ExpandableItem.vue -->
<template>
  <div>
    <div @click="isExpanded = !isExpanded">{{ item.title }}</div>
    <div v-show="isExpanded">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      isExpanded: false
    }
  }
}
</script>

动画效果

可以为展开内容添加过渡动画：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <div @click="toggleExpand(index)">{{ item.title }}</div>
      <transition name="fade">
        <div v-show="expandedItems[index]" class="content">
          {{ item.content }}
        </div>
      </transition>
    </div>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.content {
  padding: 10px;
  background: #f5f5f5;
}
</style>

这些方法可以根据实际需求进行组合和调整，实现不同风格的列表展开效果。