如何将 element-ui table 的 header 行中的文本居中？

Question

我尝试通过以下方式使 element-ui table 的 header 中的文本居中：

<el-table :data="myTable" header-row-style="text-align: center;">

不幸的是，这没有达到预期的效果。如何使列名居中？

Answer 1

header-row-style 将对象或函数作为属性值。它不需要字符串。

所以你可以试试

<el-table :data="myTable" :header-row-style="{textAlign: 'center'}">

Answer 2

要使 element-ui table 的 header 中的文本居中，您可以使用 :header-cell-style="{textAlign: 'center'} .

你可以试试：

<el-table :data="myTable" :header-cell-style="{textAlign: 'center'}">

Answer 3

仅用于居中 header 文本，

在<el-table-column />中使用header-align="center"作为属性,

用于对齐所有行 + header：您可以使用 align="center"

检查https://element.eleme.io/#/en-US/component/table#table-column-attributes

例如https://codepen.io/Mihalidis/pen/ZEaWdeP

  <el-table >

    <el-table-column
      label="ID"
      prop="id"
      header-align="center"
      align="right">
    </el-table-column>

</el-table>

如何将 element-ui table 的 header 行中的文本居中？

How do I center the text in the header row of an element-ui table?

vue.js

element-ui