解决Element UI 表格使用 'fixed' 属性时错位问题 (特殊)

使用了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”属性所导致的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容