当前位置：首页 > VUE

vue table实现折叠

2026-01-16 06:06:17VUE

实现折叠表格的基本思路

在Vue中实现表格折叠功能，可以通过动态控制行的显示与隐藏来完成。常见做法是结合v-if或v-show指令，配合数据状态管理来实现。

使用v-show实现简单折叠

通过v-show控制行的显示状态，切换布尔值即可实现折叠效果：

vue table实现折叠

<template>
  <table>
    <tr v-for="(item, index) in data" :key="index">
      <td @click="toggle(index)">{{ item.name }}</td>
      <td v-show="item.expanded">{{ item.detail }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { name: 'Item 1', detail: 'Detail 1', expanded: false },
        { name: 'Item 2', detail: 'Detail 2', expanded: false }
      ]
    }
  },
  methods: {
    toggle(index) {
      this.data[index].expanded = !this.data[index].expanded
    }
  }
}
</script>

嵌套数据的折叠实现

对于多层嵌套结构，需要递归组件或动态渲染：

<template>
  <table>
    <tr v-for="(item, index) in data" :key="index">
      <td @click="toggle(item)">
        {{ item.name }}
      </td>
      <template v-if="item.children && item.expanded">
        <tr v-for="(child, i) in item.children" :key="`child-${i}`">
          <td style="padding-left: 20px">{{ child.name }}</td>
        </tr>
      </template>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: 'Parent 1',
          expanded: false,
          children: [
            { name: 'Child 1-1' },
            { name: 'Child 1-2' }
          ]
        }
      ]
    }
  },
  methods: {
    toggle(item) {
      item.expanded = !item.expanded
    }
  }
}
</script>

使用第三方组件库

Element UI等流行库提供了现成的展开行功能：

vue table实现折叠

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <p>Detail: {{ props.row.detail }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Item 1', detail: 'Detail 1' }
      ]
    }
  }
}
</script>

动画过渡效果

添加Vue的过渡效果使折叠更平滑：

<template>
  <table>
    <tr v-for="(item, index) in data" :key="index">
      <td @click="toggle(index)">{{ item.name }}</td>
      <transition name="fade">
        <td v-if="item.expanded">{{ item.detail }}</td>
      </transition>
    </tr>
  </table>
</template>

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

性能优化建议

对于大型数据集，建议使用虚拟滚动技术。第三方库如vue-virtual-scroller可以配合使用：

<template>
  <RecycleScroller
    class="table"
    :items="data"
    :item-size="50"
    key-field="id"
  >
    <template #default="{ item }">
      <div @click="toggle(item.id)">
        {{ item.name }}
        <div v-if="expandedItems.includes(item.id)">
          {{ item.detail }}
        </div>
      </div>
    </template>
  </RecycleScroller>
</template>