问题背景:
问题描述:使用ruoyi-plus ui 的前端框架富文本控件editor进行数据提交,提交上去的内容回显带有HTML 的 p 标签,而我们想要去掉 p 标签这时就要清空提交的HTML标签。
// 常规的内容引用 prop
<el-table-column label="内容" align="center" prop="xxxx" />
解决思路
我们想要去除内容旁边的 p 标签这时就可以使用正则表达式来讲HTML的内容进行替换更改,在vue method中进行定义。
- method :
//移除HTML标签
delTag(str){
return str.replace(/<[^>]+>/g,"");
},
在回显内容中调用该方法:文章来源:https://www.toymoban.com/news/detail-542307.html
//调用method:中已经写好的 delTag 方法
<el-table-column label="内容" align="center" >
<template slot-scope="scope">
<div class="contentClass">{{ delTag(scope.row.xxxx) }}</div>
</template>
</el-table-column>
效果展示
文章来源地址https://www.toymoban.com/news/detail-542307.html
到了这里,关于【解决element ui 富文本回显 p 标签问题】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!