美文网首页
解决Element UI 表格使用 'fixed' 属性时错位问

解决Element UI 表格使用 'fixed' 属性时错位问

作者: WebDog369 | 来源:发表于2021-12-21 17:02 被阅读0次

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

    相关文章

      网友评论

          本文标题:解决Element UI 表格使用 'fixed' 属性时错位问

          本文链接:https://www.haomeiwen.com/subject/wamxqrtx.html