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;
}

 


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

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



修改后，去掉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类的内容是不需要改变的 修改后的效果：


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