如何控制Angular中多个table表格的自定义显示顺序

安全阿岳

2026-9-30

实现方案

核心思路

把固定写死的三个表格抽象成可配置的列表，通过调整列表的元素顺序动态控制表格渲染顺序，不用写重复的表格代码，也支持任意自定义顺序切换。

具体实现步骤

第一步：在组件TS中定义表格配置项，把每个表格的标识、类名、对应数据源都封装成配置对象，存到数组中，数组的初始顺序就是默认的表格显示顺序

// 组件类中定义配置
tableConfig = [
  { id: 'table1', className: 'table1', dataSource: this.datasource1 },
  { id: 'table2', className: 'table2', dataSource: this.datasource2 },
  { id: 'table3', className: 'table3', dataSource: this.datasource3 }
]

第二步：改写模板代码，删掉原来写死的三个table，只用一段代码动态遍历配置数组渲染表格

<ng-container *ngFor="let config of tableConfig">
  <table [class]="config.className">
     ...
     <tbody>
        <tr *ngFor="let data of config.dataSource">
        ...
        </tr>
     </tbody>
  </table>
</ng-container>

第三步：需要切换顺序的时候，直接调整tableConfig数组的元素顺序即可，比如要切换为table3、table1、table2的顺序，直接修改数组即可

// 切换为自定义顺序的方法示例
changeTableOrder() {
  this.tableConfig = [
    { id: 'table3', className: 'table3', dataSource: this.datasource3 },
    { id: 'table1', className: 'table1', dataSource: this.datasource1 },
    { id: 'table2', className: 'table2', dataSource: this.datasource2 }
  ]
  // 也可以通过数组sort、splice等方法实现更灵活的顺序调整，比如拖拽排序后直接更新数组即可
}