<el-tab-pane label="2021年" > <template > <el-button @click="aa(index)" v-for="(item, index) in data" :key="index">{{item.name}}</el-button> <div> <el-collapse-transition> <div v-show="show3" > <el-table :data="data"> <el-table-column type="expand"> </el-table-column> <el-table-column label="授课教员" prop="jiaoy"> </el-table-column> <el-table-column label="科目名称" prop="name"> </el-table-column> </el-table> </div> </el-collapse-transition> </div> </template> </el-tab-pane>完善这段代码使其能对应index显示隐藏
时间: 2024-02-10 19:24:10 浏览: 134
你可以通过添加一个 `show3` 数组来实现对应索引的显示和隐藏。在 `aa()` 方法中,你可以将对应索引的 `show3` 设置为相反的值,以实现显示和隐藏的切换。以下是完善后的代码示例:
```html
<el-tab-pane label="2021年">
<template>
<el-button @click="aa(index)" v-for="(item, index) in data" :key="index">{{item.name}}</el-button>
<div>
<el-collapse-transition>
<div v-show="show3[index]">
<el-table :data="data">
<el-table-column type="expand"></el-table-column>
<el-table-column label="授课教员" prop="jiaoy"></el-table-column>
<el-table-column label="科目名称" prop="name"></el-table-column>
</el-table>
</div>
</el-collapse-transition>
</div>
</template>
</el-tab-pane>
```
```javascript
data() {
return {
show3: [] // 添加一个数组用于控制显示和隐藏
};
},
methods: {
aa(index) {
this.$set(this.show3, index, !this.show3[index]); // 切换显示和隐藏的状态
}
}
```
这样,当点击按钮时,对应索引的表格将会显示或隐藏。注意,在 `data()` 方法中添加了 `show3` 数组来存储每个索引的显示和隐藏状态。使用 `this.$set()` 方法来设置数组元素的值,以确保响应式更新。
阅读全文