关于el-table表格中某单元格内容过多，自定义几行后隐藏并鼠标悬浮提示

当一行就隐藏时

可使用show-overflow-tooltip进行设置

 此时可能会出现隐藏失效，直接和后方的表格内容重叠

多行隐藏

<el-table-column prop="materiel" label="物料" min-width="180">
    <template slot-scope="{row}">
        <el-tooltip effect="dark" :content="row.roleNameList" placement="top">
            <div style="width:100%;padding: 0px;display: -webkit-box;-webkit-line-clamp:3;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;white-space: normal;line-height:18px;">
                {{row.materiel}}
            </div>
        </el-tooltip>
    </template>
</el-table-column>

此部分代码可通过-webkit-line-clamp:3 自定义几行后进行隐藏 但是此段代码并不会进行悬浮提示

悬浮提示可通过el-popover进行实现

<el-table-column prop="materiel" label="物料" min-width="180">
    <template slot-scope="scope">
        <el-popover trigger="hover" placement="top"  width="300" :disabled="scope.row.materiel.length <= 110">
            <p>{{scope.row.materiel}}</p>
            <div slot="reference" style="width:100%;padding: 0px;display: -webkit-box;-webkit-line-clamp:3;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;white-space: normal;line-height:18px;">
                <span class="ellipsis">{{scope.row.materiel}}</span>
            </div>
        </el-popover>
    </template>
</el-table-column>

通过popover的:disabled属性进行悬浮提示的判断，判断依据可设置为单元格中数据的长度

此部分代码截取了三行隐藏的部分代码进行功能合并

css代码，注意此部分代码不应在<style>标签中加入scoped 可另写一个<style>标签