实现表格过长隐藏的效果，且遇到换行符进行换行el-table-column

表格列中后端返回的数据是一连串字符，需要换行的地方后端返回的有换行符，前端需要实现内容过长时通过换行符换行
后端返回的列数据：

abcabcabcabcabcabcabc\n--------------------------------------\abcabcabcabcabcabcabc\n--------------------------------------\abcabcabcabcabcabcabc\n--------------------------------------\abcabcabcabcabcabcabc

需要实现鼠标移上去展示的效果：

abcabcabcabcabcabcabc
-------------------------------
abcabcabcabcabcabcabc
-------------------------------
abcabcabcabcabcabcabc
-------------------------------

如果通过设置show-overflow-tooltip来实现的话，实现不了效果，因为show-overflow-tooltip属性不会自动截断文字并展示省略号；
解决办法：

<el-table-column label="label" prop="text">
	<template slot-scope="{row}>
		<el-tooltip class="item" placement="top">
			<div slot="content" v-html="showContent(row.text)"></div>
			<div class="oneLine">{{row.text}}</div>
		</el-tooltip>
	</template>
<el-table-column>

showContent(text){
	return text.replace(/\n/g, '<br/>)
}

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

如果弹窗el-dialog + el-form表单要实现类似的效果：
使用v-html：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。作为VUE模板编译的时候识别不了换行符；
*

！！！需要注意的是：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用
v-html，永不用在用户提交的内容上。

<el-form-item label="label">
	<div v-html="form.text"></div>
</el-form-item>

弹窗打开时对数据做处理：

shandleView(row){
	this.open = true
	row.jobMessage = row.jobMessage.replace(/\n/g, '<br/>)
	this.form = row
}