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;}
效果