如何调整Tab组件的标签显示顺序？无需重新创建组件

算力阿峰

2026-5-12

调整Tab组件标签显示顺序，无需重新创建组件！

完全不用重新创建Tab组件哦！这确实是项目迭代拓展中非常常见的需求，不管你用的是第三方组件库还是自定义封装的Tab组件，都有灵活的解决办法，不用推倒重来。

下面分享两种最常用的实现方式：

数据驱动排序（最推荐）
现在主流的组件设计都是数据驱动的，你可以把所有Tab的配置项（标签名、对应内容、唯一标识等）放在一个数组里，渲染Tab组件时直接遍历这个数组生成标签。想要调整顺序的话，只需要修改数组中元素的排列顺序即可：

// 初始顺序：A、C、B
const originalTabs = [
  { key: 'tabA', label: '标签A', content: 'A板块内容' },
  { key: 'tabC', label: '标签C', content: 'C板块内容' },
  { key: 'tabB', label: '标签B', content: 'B板块内容' }
];

// 调整为目标顺序：A、B、C
const sortedTabs = [
  { key: 'tabA', label: '标签A', content: 'A板块内容' },
  { key: 'tabB', label: '标签B', content: 'B板块内容' },
  { key: 'tabC', label: '标签C', content: 'C板块内容' }
];

后续新增标签时，只需要在数组的对应位置插入新的配置项，就能自动按你想要的顺序显示，维护起来特别省心。

通过组件属性指定顺序
很多成熟的第三方Tab组件库（比如Element UI、Ant Design等）都提供了直接指定标签顺序的属性，比如order。以Vue的Element UI为例：
```
<el-tabs>
  <el-tab-pane label="标签A" name="A" order="1">A板块内容</el-tab-pane>
  <el-tab-pane label="标签B" name="B" order="2">B板块内容</el-tab-pane>
  <el-tab-pane label="标签C" name="C" order="3">C板块内容</el-tab-pane>
</el-tabs>
```
这种方式不需要修改数据结构，直接给每个Tab子组件设置order值就能定义显示顺序，新增标签时给对应的组件设置合适的order值即可。