vue中表格使用fixed后错位

发表于 阅读次数： 本文字数： 919 阅读时长 ≈ 1 分钟
前言

在表单中使用了fixed后后面的操作栏第一次刷新正常，后面再刷新会发生错位

解决

表格里使用了 show-overflow-tooltip 属性，导致未浮动的表格正常显示，浮动的表格变宽错位

前端代码如下

1
2
3
4
5
6
7
8
<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属性即可解决错位问题，可能是一个bug，fixed表格并未完全继承原表格的show-overflow-tooltip属性所导致的。