vue列表展开实现

实现 Vue 列表展开功能

在 Vue 中实现列表展开功能通常涉及动态控制列表项的显示与隐藏。以下是几种常见方法：

使用 v-show 或 v-if 控制显示

通过绑定布尔值控制子列表的展开状态：

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <div @click="item.expanded = !item.expanded">
        {{ item.title }}
      </div>
      <div v-show="item.expanded">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: 'Item 1', content: 'Content 1', expanded: false },
        { id: 2, title: 'Item 2', content: 'Content 2', expanded: false }
      ]
    }
  }
}
</script>

使用计算属性实现手风琴效果

确保同时只展开一个列表项：

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

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

使用 transition 添加动画效果

为展开/收起过程添加平滑过渡：

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <div @click="item.expanded = !item.expanded">
        {{ item.title }}
      </div>
      <transition name="fade">
        <div v-show="item.expanded">
          {{ 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;
}
</style>

使用第三方组件库

Element UI 或 Ant Design Vue 等库提供现成的展开组件：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="Item 1" name="1">
      Content 1
    </el-collapse-item>
    <el-collapse-item title="Item 2" name="2">
      Content 2
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: []
    }
  }
}
</script>

这些方法可根据具体需求选择使用，从简单显示隐藏到带动画的复杂交互都能实现。