vue列表展开实现

Vue列表展开实现方法

使用v-if控制显示隐藏

通过v-if指令动态控制列表项的显示与隐藏，结合点击事件切换状态。

<template>
  <div>
    <button @click="toggleList">展开/收起列表</button>
    <ul v-if="isExpanded">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    toggleList() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

使用transition添加动画效果

为展开收起过程添加平滑的过渡动画。

<template>
  <div>
    <button @click="toggleList">展开/收起</button>
    <transition name="fade">
      <ul v-if="isExpanded">
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
      </ul>
    </transition>
  </div>
</template>

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

动态高度过渡

通过max-height实现高度变化的过渡效果。

<template>
  <div>
    <button @click="toggleList">展开/收起</button>
    <div class="list-container" :style="{ maxHeight: isExpanded ? '500px' : '0' }">
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<style>
.list-container {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
</style>

使用第三方组件

对于更复杂的需求，可以使用现成的UI组件库如Element UI的Collapse组件。

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="列表标题" name="1">
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
      </ul>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1'],
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  }
}
</script>

多级嵌套展开

实现多级列表的展开功能，通常需要递归组件。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <div @click="toggleItem(item)">
          {{ item.name }}
          <span v-if="item.children">[{{ item.expanded ? '-' : '+' }}]</span>
        </div>
        <ul v-if="item.expanded && item.children">
          <li v-for="child in item.children" :key="child.id">{{ child.name }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          id: 1,
          name: 'Parent 1',
          expanded: false,
          children: [
            { id: 11, name: 'Child 1' }
          ]
        }
      ]
    }
  },
  methods: {
    toggleItem(item) {
      if (item.children) {
        item.expanded = !item.expanded
      }
    }
  }
}
</script>