element-ui分组组件上下页按钮加边框

Element UI 的分组组件通常指的是 `el-collapse` 或 `el-tabs` 这样的折叠面板或选项卡组件，它们默认并不包含上下页按钮。如果你想在分组组件上添加自定义的上下页导航按钮并带有边框，你需要进行一些定制和样式调整。

首先，你可以通过 Vue.js 的 `v-for` 指令创建额外的按钮，并绑定点击事件去切换内容。例如，对于 `el-tabs` 组件：

<template>
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <!-- 原始 tabs -->
    <el-tab-pane label="Tab 1" name="1">Tab 1 Content</el-tab-pane>
    <el-tab-pane label="Tab 2" name="2">Tab 2 Content</el-tab-pane>
    <!-- 添加的下一页和上一页按钮 -->
    <el-button type="primary" @click="prevTab" :disabled="isFirstPage">上一页</el-button>
    <el-button type="primary" @click="nextTab" :disabled="isLastPage">下一页</el-button>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: '1',
      tabs: [
        // 更多 tab 内容...
      ],
      isFirstPage: true,
      isLastPage: false,
    };
  },
  methods: {
    handleTabClick(tab) {
      this.activeName = tab.name;
      this.isFirstPage = (this.tabs.findIndex(t => t.name === this.activeName) === 0);
      this.isLastPage = (this.tabs.findIndex(t => t.name === this.activeName) === this.tabs.length - 1);
    },
    prevTab() {
      if (this.isFirstPage) return;
      this.handleTabClick(this.tabs[this.tabs.findIndex(t => t.name !== this.activeName)]);
    },
    nextTab() {
      if (this.isLastPage) return;
      const index = this.tabs.findIndex(t => t.name === this.activeName);
      this.handleTabClick(this.tabs[index + 1]);
    },
  },
};
</script>

<style scoped>
.el-tabs__nav .custom-pagination {
  display: flex;
  justify-content: space-between;
}

.custom-pagination button {
  border: 1px solid #ccc; /* 添加边框 */
}
</style>

然后，在你的 CSS 中为这些自定义按钮添加适当的样式，如上面的 `custom-pagination` 类名所示。