当一行就隐藏时
可使用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>标签