完善修改下面这段代码使其循环按钮并且根据按钮显示隐藏对应内容<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]" > </div> </el-collapse-transition> </div> </template> </el-tab-pane>

你可以尝试使用一个数组来记录每个按钮对应的显示状态。根据按钮的索引，通过修改数组中的元素来控制对应内容的显示与隐藏。以下是修改后的代码：

<el-tab-pane label="2021年">
  <template>
    <el-button @click="toggleContent(index)" v-for="(item, index) in data" :key="index">
      {{item.name}}
    </el-button>
    <div>
      <el-collapse-transition v-for="(item, index) in data" :key="index">
        <div v-show="showContent[index]">
          <!-- 对应内容 -->
        </div>
      </el-collapse-transition>
    </div>
  </template>
</el-tab-pane>

在你的 Vue 组件中，你需要在 `data` 函数中添加一个 `showContent` 数组，并初始化为 `false`，长度与 `data` 数组相同。然后在 `toggleContent` 方法中，根据点击的按钮索引来切换对应内容的显示与隐藏。下面是示例代码：

data() {
  return {
    showContent: Array(this.data.length).fill(false)
  };
},
methods: {
  toggleContent(index) {
    this.$set(this.showContent, index, !this.showContent[index]);
  }
}

这样，每次点击按钮时，对应的内容就会显示或隐藏。记得将 `<-- 对应内容 -->` 替换为实际需要显示的内容。