elementui-table组件列表中的tooltip内容过长超出屏幕换行显示内容,虽然el-table列属性中带的有show-overflow-tooltip,可以设置内容超出列宽度显示为…,且有tooltip提示全部内容,但是内容过多时,提示会超出屏幕: 只有全屏才能展示 很不友好
el-table组件自带的属性无法修改为自动换行,也无法控制弹框的宽度太长了不友好
解决方法:
<el-table-column v-if="value.prop == 'remark'" :key="index" :prop="value.prop" :label="value.label"
:width="value.width || 220">
<template slot-scope="scope">
<el-tooltip placement="top">
<div slot="content" class="text_content">
{{ scope.row.remark }}
</div>
<div class="text_els">
{{ scope.row.remark }}
</div>
</el-tooltip>
</template>
</el-table-column>
css
然后设置显示内容样式,宽度为多少就是tooltip多宽时换行,text_content为tip的样式,text_els为表格里的样式
.text_content {
display: block;
max-width: 700px;
white-space: wrap;
font-size: 14px;
}
.text_els {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
效果