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

element table 表头文字对齐疑难

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

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

自定义表头

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

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

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

以上就是Element Table 表头文字对齐：如何实现不同长度的表头文字对齐？的详细内容，更多请关注其它相关文章！