el-table 列内容溢出隐藏，鼠标悬浮提示效果

场景：在备注内容很多的情况下，将列表都展示出来，会显得行特别的高；所以需要进行溢出隐藏处理，并在鼠标悬浮的时候进行特殊的提示；

效果：

 

 

 参考 Element UI 官方文档：可尝试在 el-table-column 上加上show-overflow-tooltip属性；

show-overflow-tooltip

当内容过长被隐藏时显示 tooltip

Boolean

—

false

 本例关键代码：

<el-table id="out-table" :header-cell-style="{ background: '#eef1f6', color: '#606266','text-align':'center' }" :data="detailList"
 stripe style="width: 100%;" border>
	<el-table-column align="center" prop="item" label="名称"> </el-table-column>
	<el-table-column align="right" prop="price" label="单价"> </el-table-column>
	<el-table-column align="right" prop="num" label="件数"> </el-table-column>
	<el-table-column align="right" prop="handle_price" label="价格"></el-table-column>
	<el-table-column align="right" prop="discount_price" label="共计"></el-table-column>
	<el-table-column align="center" prop="remark" label="备注">
		<template v-slot="scope">
			<el-tooltip class="item" effect="light" placement="top">
				<div v-html="scope.row.remark" slot="content" style="max-width:300px"></div>
				<div class="oneLine">{{scope.row.remark}}</div>
			</el-tooltip>
		</template>
	</el-table-column>

</el-table>

<style>
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>