elementui表格居中显示
时间: 2023-10-28 11:59:04 浏览: 89
要使Element UI表格内容居中显示,你可以在表头中使用`<el-table :cell-style="rowStyle">`,并在定义的`rowStyle`方法中设置内容居中的样式。具体的步骤如下:
1. 在模板中定义表格,并添加`:cell-style="rowStyle"`属性,如下所示:
```
<el-table :cell-style="rowStyle">
<!-- 表头 -->
<el-table-column prop="inspect_item_conf_name" align="center"></el-table-column>
<!-- 其他表格内容 -->
</el-table>
```
2. 在Vue实例中定义`rowStyle`方法,用于返回内容居中的样式。具体代码如下:
```
data() {
return {
// 其他数据
}
},
methods: {
rowStyle() {
return {
textAlign: 'center'
}
}
}
```
这样设置后,表格的内容就会居中显示了。
相关问题
elementui表格居中
要使element-ui表格内容居中,可以使用以下两种方法:
1. 在el-table-column标签上设置align="center"属性,例如:
```html
<el-table-column prop="id" label="ID" align="center"></el-table-column>
```
这将使该列内容在表格中居中对齐。
2. 在el-table标签中添加cell-style属性,并在methods方法中定义方法rowStyle,例如:
```html
<el-table :data="tableData" :cell-style="rowStyle"></el-table>
```
在methods中添加rowStyle方法,并返回"text-align:center",如下所示:
```javascript
methods: {
rowStyle() {
return "text-align:center";
}
}
```
这将使表格中所有单元格内容居中对齐。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
elementUI 表格 居中
要让 ElementUI 表格居中可以使用以下 CSS 样式:
```css
.el-table__body-wrapper {
display: flex;
justify-content: center;
}
```
这将使表格容器居中对齐。如果你要使表格内容也居中对齐,可以添加以下样式:
```css
.el-table td, .el-table th {
text-align: center;
}
```
阅读全文