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

一、问题1：vue中table表格单列内容文本过长，导致回行过多，撑大table表格过于难看。如图：二、解决方法（三种）解决效果图如下：第一种：①在el-table上面增加代码tooltip-effect="dark"或者tooltip-effect=“light”<el-table:data="resultData"bordertooltip-effect="dark"style="wid

你说的誓言°变失言

17435人浏览 · 2021-01-06 10:56:59

你说的誓言°变失言 · 2021-01-06 10:56:59 发布

一、问题

1：vue中table表格单列内容文本过长，导致回行过多，撑大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;
}