vue 能一层层展开的表格
时间: 2024-09-25 18:20:28 浏览: 20
Vue.js 可以通过数据绑定和组件化的能力轻松地实现表格的层层展开。通常,我们会使用 Vue 的父子组件或者递归组件来构建这种动态表格。下面是一个简单的例子:
1. **父子组件**:可以创建一个基础表格组件,包含行和列的基本结构,每个单元格(如`<td>`)有一个 `v-if` 或者 `v-show`指令,控制其是否展开内容。当点击某一行时,发送一个事件给父组件,由父组件更新状态并显示详情。
```html
<!-- 父组件 -->
<template>
<table>
<tr v-for="item in list" :key="item.id">
<td :class="{ 'expand': isExpanded(item.id) }" @click="toggleExpand(item.id)">
{{ item.title }}
</td>
<!-- 使用递归组件 -->
<child-table :row-data="item"></child-table>
</tr>
</table>
</template>
<script>
export default {
methods: {
toggleExpand(id) {
this.isExpanded[id] = !this.isExpanded[id];
},
isExpanded(id) {
// 存储展开状态的变量,初始时所有项都是关闭的
return this.expandedList.includes(id);
}
}
}
</script>
```
2. **递归组件**:如果需要更深层次的展开,可以创建一个递归组件,用于渲染嵌套的数据结构。每次点击时,递归遍历层级直到找到对应的细节部分。
```html
<!-- 递归组件 child-table.vue -->
<template>
<div v-if="rowData.children">
<ul>
<li v-for="subItem in rowData.children" :key="subItem.id">
<child-table :row-data="subItem" />
</li>
</ul>
</div>
<p v-else>{{ rowData.detail }}</p>
</template>
```