在开发过程中遇到element-ui table表格文字过长的问题
话不多说上代码
<el-table-column prop="functionDesc" label="接口数据">
<template #default="{ row }">
<span>
<!-- {{ row.functionDesc }} -->
{{ "贾不假白玉为堂金做马;阿房宫三百里住不下金陵一个史;东海缺少白玉床,龙王来请金陵王;丰年好大雪,珍珠如土金如铁,假作真时真亦假,无为有时有还无!" }}
</span>
</template>
</el-table-column>
文字过多使得页面不美观
解决方法
<el-table-column>中加
:show-overflow-tooltip="true" 属性进行溢出处理,鼠标放置文字内容浮动显示。
<el-table-column prop="functionDesc" label="接口数据" :show-overflow-tooltip="true">
<template #default="{ row }">
<span>
<!-- {{ row.functionDesc }} -->
{{ "贾不假白玉为堂金做马;阿房宫三百里住不下金陵一个史;东海缺少白玉床,龙王来请金陵王;丰年好大雪,珍珠如土金如铁,假作真时真亦假,无为有时有还无!" }}
</span>
</template>
</el-table-column>
此时文字内容浮动一行全部显示,我们也可以设置隐藏内容显示宽度,多余部分自动换行;
只需添加CSS属性;
<style lang="less">
/* 设置显示隐藏部分内容,按50%显示 */
.el-popper{
max-width: 50%;
}
</style>