表格列中后端返回的数据是一连串字符,需要换行的地方后端返回的有换行符,前端需要实现内容过长时通过换行符换行
后端返回的列数据:
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
}