Element Table 表头文字对齐：如何实现不同长度的表头文字对齐？

element table 表头文字对齐疑难

如何在 element table 中将不同长度的表头文字对齐，如两个字与四个字？

传统的通过给 label 属性添加空格的方法并不奏效。对此，推荐使用以下解决方案：

自定义表头

利用 slot-scope 插槽，自定义表头内容，实现对齐：

<el-table-column
  :label=&quot;'自定义表头'&quot;
  width=&quot;45&quot;
  v-show=&quot;item.children.length&quot;
  v-for=&quot;(citem, cindex) in item.children&quot;
  :key=&quot;cindex&quot;
  align=&quot;center&quot;
>
  <template slot-scope=&quot;scope&quot;&gt;
    {{ scope.row.dataList[citem.index].count }}
  </template>
  <template slot=&quot;header&quot;&gt;
    <div  v-html=&quot;citem.name&quot;&gt;&lt;/div&gt;
  </template>
</el-table-column>

通过自定义表头，利用 v-html 输出 citem.name 可以实现对齐需求。