解决Element UI 表格使用 'fixed' 属性时错位问
2021-12-21 本文已影响0人
WebDog369
使用了fixed后表格悬浮部分错位的问题让人头疼,这里给大家提供一个解决方法,亲测有效。
这个解决办法有一个前提条件: 你的表格里使用了 “show-overflow-tooltip” 属性,导致未浮动的表格正常显示,浮动的表格变宽错位。
<el-table-column prop="name" label="姓名" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="sex" label="性别" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="age" label="年龄" min-width="100" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="151" fixed="right">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleClick(scope.row)">操作按钮</el-button>
</template>
</el-table-column>
解决办法:把所有el-table-column标签都加上“ show-overflow-tooltip”属性即可解决错位问题,至于原理,我猜是element官方的一个bug,fixed表格并未完全继承原表格的“ show-overflow-tooltip”属性所导致的。