elementui的table表格固定列错乱解决

elementui的table表格固定列错乱解决

这个错误主要就发生在safari浏览器上,谷歌浏览器的一些版本上(应该是它的低一些的版本),还有微信打开的浏览器上。

  • 错误原因:业务上的数据过长,需求是显示两行,其余的以省略号形式,并且要求在鼠标放在这行数据上时提示里面呢可以显示完整信息。 发生固定列错乱原因是我使用了elementui的组件 实际上如果我想=给表格里面某一行的某一格元素加提示直接在标签前面加上:show-overflow-tooltip="true"即可 我原来的写法
<el-table-column align="center" label="上架描述">
    <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top">
            <div class="tipsTxt">{{scope.row.art_describe}}</div>
        </el-tooltip>
    </template>
</el-table-column>
.tipsTxt{
  text-overflow:ellipsis;/*设置隐藏部分为省略号*/
  overflow: hidden;/*设置隐藏*/
  display: -webkit-box;
  -webkit-line-clamp: 2;/*设置显示行数,此处为2行,可设置其他数字*/
  -webkit-box-orient: vertical;
}

出错的
效果图(右侧编辑删除一栏是固定列,然后现在那里是错乱的


修改后,去掉el-tooltip,加上show-overflow-tooltip,就是表格自身有提示配置。

<el-table-column align="center" label="上架描述" :show-overflow-tooltip="true">
    <template slot-scope="scope">
        <div class="tipsTxt">{{scope.row.art_describe}}</div>
    </template>
</el-table-column>

tipsTxt类的内容是不需要改变的 修改后的效果:

 

原文地址:https://www.cnblogs.com/sinceForever/p/12737339.html