element ui表格内容居中
时间: 2023-08-21 14:04:39 浏览: 150
要使element-ui表格内容居中,有几种方法可以尝试。首先,可以在表格的header-cell-style属性中设置表头内容居中,如下所示:\[1\]
```html
<el-table :data="dataList" :header-cell-style="{ textAlign: 'center' }">
</el-table>
```
其次,可以在methods中定义一个headStyle方法,并在表格的header-cell-style属性中调用该方法,如下所示:\[2\]
```html
<el-table :data="tableData" :header-cell-style="headStyle">
</el-table>
methods: {
headStyle() {
return "text-align: center";
}
}
```
另外,还可以在表格的cell-style属性中设置表格内容居中,如下所示:\[3\]
```html
<el-table :data="tableData" :cell-style="rowStyle">
</el-table>
methods: {
rowStyle() {
return "text-align: center";
}
}
```
通过以上方法,你可以实现element-ui表格内容的居中显示。
#### 引用[.reference_title]
- *1* [element ui表格标题及内容居中](https://blog.csdn.net/weixin_45914210/article/details/127842689)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [element UI 中表格的居中显示](https://blog.csdn.net/weixin_44524835/article/details/108581115)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文