el-table+数据垂直居中
时间: 2024-01-03 17:21:11 浏览: 176
要使el-table中的数据垂直居中,可以使用CSS样式来实现。具体步骤如下:
1.在el-table中添加一个slot,用于自定义单元格的内容。
2.在slot中添加一个div,用于包裹单元格中的内容。
3.为这个div添加CSS样式,使其垂直居中。
下面是一个示例代码:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<div class="cell-wrapper">{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="scope">
<div class="cell-wrapper">{{ scope.row.age }}</div>
</template>
</el-table-column>
</el-table>
<style>
.cell-wrapper {
display: flex;
align-items: center;
height: 100%;
}
</style>
```
在上面的代码中,我们为el-table中的每个单元格添加了一个slot,并在slot中添加了一个div,用于包裹单元格中的内容。然后,我们为这个div添加了CSS样式,使其垂直居中。
阅读全文
相关推荐


















