Ember-table初始加载表头自动显示索引，点击排序后消失如何解决？

使用ember-table组件时出现如下异常表现：

• 组件初始加载时会自动在表头标题旁添加索引序号，效果如下：
  
• 点击任意表头触发表格排序后，索引会按预期消失；如果不启用排序功能，表格初始显示也正常。排序后索引消失的效果如下：
  

排序对象配置 #

sorts = [
  { valuePath: 'username' },
  { valuePath: 'total_assignment_count' },
  { valuePath: 'accepted_assignment_count' },
  { valuePath: 'accepted_rate' },
  { valuePath: 'acl_name' },
  { valuePath: 'repo_name'}
];

模板代码 #

<EmberTable as |t|>
  <t.head
    @columns={{this.tableColumns}}
    @sorts={{this.sorts}}
    @onUpdateSorts={{action (mut this.sorts)}}
  />
  <t.body @rows={{this.tableData}} />
</EmberTable>

这个现象是ember-table的默认渲染逻辑导致的：传入的sorts数组中如果存在没有配置direction（排序方向）属性的项，组件会把这些项识别为多列排序的待排序列，自动在对应表头旁渲染排序序号。手动点击表头触发排序后，排序项会自动写入ascending（升序）或descending（降序）的方向值，不符合多列待排序的渲染规则，序号就会自动消失。如果完全不传入sorts配置（不启用排序），自然也不会触发这个逻辑，初始显示就正常。

两种配置方式都可以实现初始加载不显示序号：

1. 如果页面初始加载不需要默认排序，直接把sorts的初始值设为空数组即可：

sorts = [];

2. 如果需要设置初始默认排序列，给对应的排序项明确加上direction属性指定排序方向，不要保留无方向的排序配置项。例如默认按用户名字段升序排序的配置如下：

sorts = [
  { valuePath: 'username', direction: 'ascending' }
];

内容的提问来源于stack exchange，提问作者rj487