怎么给elementui表内容设置文字居中
时间: 2023-10-19 14:22:32 浏览: 104
dataGridView表头单元格文字居中显示
给Element UI表格内容设置文字居中可以通过以下两种方式实现:
1. 使用 `align` 属性:可以在 `<el-table-column>` 组件中使用 `align` 属性来设置表格内容的对齐方式。将 `align` 设置为 `center` 即可将表格内容居中。示例代码如下:
```html
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" :align="center"></el-table-column>
<el-table-column prop="age" label="年龄" :align="center"></el-table-column>
<el-table-column prop="address" label="地址" :align="center"></el-table-column>
</el-table>
```
2. 使用 CSS 样式:可以通过给表格内容单元格添加 CSS 样式来设置文字居中。例如,可以添加自定义类名来设置表格内容样式。示例代码如下:
```html
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<style>
.el-table__body td {
text-align: center;
}
</style>
```
以上两种方式都可以实现给Element UI表格内容设置文字居中的效果,具体选择哪种方式取决于您的实际需求。
阅读全文