Element Table 表格 自定义实现tooltip及隐藏过长文字_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>
        </template>
    </el-table-column>

2、浏览器中效果：

单元中文本过长时显示了省略号，将鼠标放在单元格文本上时，出现了tooltip提示框

二、产品需要实现的效果如下

三、解决文案

1、HTML代码

<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            
>
    <el-table-column label="供应商" prop="supplier">
        <template slot-scope="scope">
            <div class="montyly-resource-settlement-tooltip">
                <el-tooltip placement="bottom">
                    <div slot="content" style="max-width:300px;line-height:160%;">
                        <span>供应商名称：{{ scope.row.supplier }}</span><br />
                        <span>合同ID：{{ scope.row.contractId }}</span>
                    </div>
                    <div class="one-line">
                        <span>{{ scope.row.supplier }}</span><br />
                        <span style="color:#909399;">{{ scope.row.contractId }}</span>
                    </div>
                </el-tooltip>
            </div>
        </template>
    </el-table-column>

2、下图是上面HTML代码的相关解释

3、使用CSS实现文本过长时单元格中显示部分文本及省略号

.one-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

经过上述设置后，即可实现产品要求的效果。