vue中table表格内容过长——显示省略号悬浮显示内容

一、问题

1:vue中table表格单列内容文本过长,导致回行过多,撑大table表格过于难看。如图:
《vue中table表格内容过长——显示省略号悬浮显示内容》

二、解决方法(三种)

解决效果图如下:《vue中table表格内容过长——显示省略号悬浮显示内容》

第一种:①在el-table上面增加代码tooltip-effect=”dark”或者tooltip-effect=”light”

<el-table
	:data="resultData"
    border
    tooltip-effect="dark"
    style="width:100%"
    :header-cell-style="{background:'#f8f8f8',color:'#000'}"
>

②在el-table-column上面增加代码show-overflow-tooltip

<el-table-column 
	prop="PrjName" 
	label="企业申报项目名称" 
	width="70" 
	show-overflow-tooltip
>
</el-table-column>

第二种:在el-table-column上面直接增加代码:show-overflow-tooltip=”true”

<el-table-column 
	prop="PrjName" 
	label="企业申报项目名称" 
	width="70" 
	:show-overflow-tooltip="true"
>
</el-table-column>

第三种:在el-table-column下面增加插槽(不建议使用第三种)

<el-table-column 
	prop="PrjName" 
	label="企业申报项目名称" 
	width="70">
	<template slot-scope="scope">
    	<el-tooltip
        	class="item apostrophe"
       		effect="dark"
            :content="scope.row.PrjName"
            placement="top">
                <span>{ {  scope.row.PrjName}}</span>
        /el-tooltip>
    </template>
</el-table-column>
.apostrophe{ 
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
//哪一行增加插槽,写哪个对应的下表。不然会出现内容不居中
.table /deep/ .el-table__row td:nth-child(2) .cell { 
  cursor: pointer;
  color: #d10000;
  text-align: left;
}
    原文作者:你说的誓言°变失言
    原文地址: https://blog.csdn.net/weixin_44979432/article/details/112259197
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞