el-table 表头居中
时间: 2023-07-07 14:05:41 浏览: 70
你可以使用 `header-align` 属性来设置表头的对齐方式,将其设置为 `center` 即可让表头居中。示例代码如下:
```html
<el-table :data="tableData">
<el-table-column
prop="name"
label="姓名"
header-align="center">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
header-align="center">
</el-table-column>
</el-table>
```
在上面的示例中,我们将 `header-align` 属性设置为 `center`,这样表头就会居中显示。如果你想让所有表头都居中,可以将 `header-align` 属性设置在 `el-table` 组件上,如下所示:
```html
<el-table :data="tableData" header-align="center">
<!-- 表格列 -->
</el-table>
```
这样就可以让所有表头都居中显示了。
相关问题
el-table 表头文字居中
要让el-table表头文字居中,可以在el-table标签中加入`:header-cell-style="{ 'text-align': 'center' }"`。这样可以设置表头单元格的样式使其居中显示。
例如:
```
<el-table :data="tableData" stripe border highlight-current-row :header-cell-style="{ 'text-align': 'center' }">
<el-table-column label="序号" type="index" width="80"></el-table-column>
<el-table-column prop="title" label="标题"></el-table-column>
<el-table-column prop="num" label="数量" sortable width="100"></el-table-column>
</el-table>
```
如果还想让表格内容也居中显示,可以在el-table标签中加入`:cell-style="{ 'text-align': 'center' }"`。
例如:
```
<el-table :data="gridData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
<el-table-column label="名称" prop="realname" align="center"></el-table-column>
</el-table>
```
el-table表头文字居中
要让 `el-table` 表头文字居中,可以通过设置 `header-align` 属性来实现。具体的实现方法如下:
```html
<el-table :data="tableData" header-row-style="text-align:center" header-align="center">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
```
其中,`header-align` 属性可以设置表头文字的水平对齐方式,这里设置为 `center` 即可让表头文字居中。同时,为了让表头样式更好看,还可以设置 `header-row-style` 属性来调整表头行的样式,这里通过设置 `text-align:center` 来让表头文字居中。