vue中table表格内容过长——显示省略号悬浮显示内容_tooltip-effect="dark

一、问题

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'}"
>
1
2
3
4
5
6
7

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

<el-table-column 
	prop="PrjName" 
	label="企业申报项目名称" 
	width="70" 
	show-overflow-tooltip
>
</el-table-column>
1
2
3
4
5
6
7

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

<el-table-column 
	prop="PrjName" 
	label="企业申报项目名称" 
	width="70" 
	:show-overflow-tooltip="true"
>
</el-table-column>
1
2
3
4
5
6
7

第三种：在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

.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;
}
1
2
3
4
5
6
7
8
9
10
11