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類的內容是不需要改變的 修改后的效果：