vue实现表格收缩展开
Vue 表格展开/收缩实现方法
使用 v-if 或 v-show 控制显隐
通过数据驱动的方式控制行的展开与收缩状态，结合 Vue 的指令实现动态渲染。
<template>
<table>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>
<button @click="toggleExpand(item)">
{{ item.expanded ? '收起' : '展开' }}
</button>
</td>
</tr>
<!-- 展开内容 -->
<tr v-if="item.expanded" v-for="item in tableData" :key="'detail-' + item.id">
<td colspan="2">{{ item.details }}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '项目1', details: '详细内容...', expanded: false },
// 其他数据...
]
}
},
methods: {
toggleExpand(item) {
item.expanded = !item.expanded
}
}
}
</script>使用 Element UI 的展开行功能
如果使用 Element UI 组件库，可直接利用其内置的展开行功能。
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column type="expand">
<template #default="props">
<p>详情: {{ props.row.details }}</p>
</template>
</el-table-column>
<el-table-column prop="name" label="名称"/>
</el-table>
</template>动态嵌套表格实现多级展开
通过递归组件实现多级嵌套展开效果。
<template>
<table>
<TableRow
v-for="item in tableData"
:key="item.id"
:row-data="item"
@toggle="onToggle"/>
</table>
</template>
<!-- TableRow.vue 组件 -->
<template>
<tr>
<td>{{ rowData.name }}</td>
<td>
<button @click="$emit('toggle', rowData.id)">
{{ rowData.expanded ? '收起' : '展开' }}
</button>
</td>
</tr>
<tr v-if="rowData.expanded">
<td colspan="2">
<!-- 嵌套内容或子表格 -->
<table v-if="rowData.children">
<TableRow
v-for="child in rowData.children"
:key="child.id"
:row-data="child"
@toggle="$emit('toggle', child.id)"/>
</table>
</td>
</tr>
</template>动画过渡效果
添加 Vue 的过渡效果使展开/收缩更平滑。
<transition name="slide">
<tr v-if="item.expanded">
<td colspan="2">{{ item.details }}</td>
</tr>
</transition>
<style>
.slide-enter-active, .slide-leave-active {
transition: all 0.3s ease;
max-height: 100px;
}
.slide-enter, .slide-leave-to {
opacity: 0;
max-height: 0;
}
</style>实现要点
- 数据驱动：通过修改数据项的
expanded属性控制展开状态 - 性能优化：大数据量时建议使用虚拟滚动
- 组件化：复杂结构建议拆分为子组件
- 无障碍：确保按钮有明确的 ARIA 标签
以上方法可根据具体需求组合使用，Element UI 等组件库提供了开箱即用的解决方案，自定义实现则更灵活可控。
