在上图中,我们可以看到elementUI中表格的cell设置固定高度为40后,再设置垂直居样式后,不起作用。
当你改变display的属性值后,你会发现设置的高度40就没用,他会随着内容的高度而去撑开。这样也不满足需求。
这个需求是继上一篇博客https://blog.csdn.net/CuiCui_web/article/details/106531997设置固定高度,根据高度超出显示气泡之后,新增加了需要垂直居中显示。
下面介绍一下如何显示垂直居中:
利用插槽的方式进行设置:
<template slot-scope="scope">
<span class="verticalAlign">{{ scope.row.id }}</span>
</template>
样式设置:
.el-table. td>.cell{
height: 92px;
}
.verticalAlign {
height:92px; // 高度与固定的cell高度一致
display: table-cell; // 这里需要设置为table-cell才行
vertical-align: middle; // 设置垂直居中样式即可
}
如果原本表格中设置了插槽,那么只需要增加verticalAlign类名即可。
完整的 结构代码如下:
<el-table
class="testHeightTip"
:data="tableData"
@cell-mouse-enter="handleCellMouseEnter"
style="width: 100%" border>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="序号"
align="center"
fixed="left"
width="64">
<template slot-scope="scope">
<span class="verticalAlign">{{scope.$index }}</span>
</template>
</el-table-column>
<el-table-column
label="商品 ID"
prop="id">
<template slot-scope="scope">
<span class="verticalAlign">{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column
label="商品名称"
align="left"
prop="name">
<template slot-scope="scope">
<el-tooltip v-if="scope.column.show===true" popper-class="preTooltip"
effect="dark"
placement="top">
<span slot="content" v-html="scope.row.name"></span>
<span class="verticalAlign" v-html="scope.row.name"></span>
</el-tooltip>
<span class="verticalAlign" v-else v-html="scope.row.name"></span>
</template>
</el-table-column>
<el-table-column
label="描述"
prop="desc">
<template slot-scope="scope">
<span class="verticalAlign">{{ scope.row.desc }}</span>
</template>
</el-table-column>
<el-table-column label="快捷操作" width="90">
<template slot-scope="scope" >
<div class="verticalAlign" >
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<br>
<el-button
style="margin-top:15px;"
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
没有垂直居中的图:
设置样式之后的效果图: