【解决element ui 富文本回显 p 标签问题】

问题背景：

问题描述：使用ruoyi-plus ui 的前端框架富文本控件editor进行数据提交，提交上去的内容回显带有HTML 的 p 标签，而我们想要去掉 p 标签这时就要清空提交的HTML标签。

// 常规的内容引用 prop
<el-table-column label="内容" align="center" prop="xxxx" />

解决思路

我们想要去除内容旁边的 p 标签这时就可以使用正则表达式来讲HTML的内容进行替换更改，在vue method中进行定义。

1. method ：

//移除HTML标签
delTag(str){
    
    
return str.replace(/<[^>]+>/g,"");
},

在回显内容中调用该方法：

//调用method：中已经写好的 delTag 方法
<el-table-column label="内容" align="center" >
   <template slot-scope="scope">
     <div class="contentClass">{
    
    {
    
     delTag(scope.row.xxxx) }}</div>
   </template>
</el-table-column>

效果展示