VUE3 element-ui table文字过长-进行省略溢出处理_vue3 文字超长显示

在开发过程中遇到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>