Element Table 表格 自定义实现tooltip及隐藏过长文字

一、Table表格单元格内容过长时，Element默认实现的tooltip效果如下

1、HMTL代码

<el-table
    :data="tableData"
    header-row-class-name="custom-table-header"
    header-cell-class-name="custom-table-header-cell"
    cell-class-name="custom-table-cell"
    class="custom-table-n"
    stripe
    style="color:#303133;width:100%;"
    border            
>
    <!-- 供应商列开启了 show-overflow-tooltip 项，实现了文本内容过长时显示省略号及tooltip提示框 -->
    <el-table-column label="供应商" prop="supplier" show-overflow-tooltip="true">
        <template slot-scope="scope">
            <div class="one-line">
                <span>{
  { scope.row.supplier }}</span><br />
                <span style="color:#909399;">{
  { scope.row.contractId }}</span>
            </div>