后台返回的数据中需要换行的部分应有明显可以进行分割符,然后使用
进行全局替换,最后使用v-html进行转译
<el-table-column prop="desc" label="tooltip换行描述" width="140">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" placement="top">
// {{}}会将数据解释为普通文本,而非 HTML 代码。
<div v-html="ToBreak(scope.row.desc)" slot="content"></div> // scope.row.desc为需要换行展示的tooltip
<div class="oneLine">{{scope.row.desc}}</div>
</el-tooltip>
</template>
</el-table-column>
// ...
<script>
export default {
data () {
return {
}
},
methods: {
// 将 \n 换为 <br/>标签
ToBreak (val) {
return val.replace(/aaa/g, '<br />') //这里的aaa指的是上文中提到的分隔符
}
}
}
</script>
// 样式
<style lang='scss'>
.oneLine {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>