在
Element UI中，要实现表格内容居中显示，可以通过自定义表格的列样式或使用插槽来实现。下面是两种常见的方法：
1. 使用自定义列样式：
可以使用`align`属性设置表格列的对齐方式为"center"，如下所示：
```html
<el-
table :data="
tableData">
<el-
table-column prop="name" label="姓名" align="center"></el-
table-column>
<el-
table-column prop="age" label="年龄" align="center"></el-
table-column>
<!-- 其他列 -->
</el-
table>
```
在上面的示例中，将`align`属性设置为"center"，可以使表格列的内容居中显示。
2. 使用插槽方式：
可以使用`slot-scope`和`<template>`标签来自定义表格列的内容，并在模板中设置居中样式，如下所示：
```html
<el-
table :data="
tableData">
<el-
table-column label="姓名">
<template slot-scope="scope">
<div class="cell-center">{{ scope.row.name }}</div>
</template>
</el-
table-column>
<el-
table-column label="年龄">
<template slot-scope="scope">
<div class="cell-center">{{ scope.row.age }}</div>
</template>
</el-
table-column>
<!-- 其他列 -->
</el-
table>
```
在上面的示例中，通过使用`slot-scope`获取到每一行的数据，并在模板中使用`<div>`标签设置居中样式，通过给`<div>`标签添加一个名为`cell-center`的样式类来实现内容居中显示。
需要注意的是，你可以根据实际需求来调整样式和布局。如果你想对所有列都进行居中显示，可以在CSS中定义一个`.cell-center`样式类，然后将其应用到表格列的内容中。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
