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

这篇具有很好参考价值的文章主要介绍了【解决element ui 富文本回显 p 标签问题】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题背景:

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

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

vue 富文本回显,element UI 前端,前端,ui,正则表达式,elementui,前端框架

解决思路

我们想要去除内容旁边的 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>

效果展示

vue 富文本回显,element UI 前端,前端,ui,正则表达式,elementui,前端框架文章来源地址https://www.toymoban.com/news/detail-542307.html

到了这里,关于【解决element ui 富文本回显 p 标签问题】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决IDEA中element-ui标签没有代码提示问题

    一.所遇问题 安装完 element-ui 后发现警告 \\\"Unknown html tag el-button\\\" ,且标签 没有代码提示 ,但依旧能够正常运行 二.解决方法 方法一:打开项目下的 node_modules ,找到 element-ui ,右击点击 Include JavaScript files 方法二:右击目录 node_modules ,把node_modules取消排除  解决后:

    2024年02月11日
    浏览(41)
  • 解决element ui中el-tabs标签点击切换闪屏问题

    现象:点击切换 element ui中el-tabs时候,table会出现闪一下的状况; 初始element ui中el-tabs组件代码如下: 使用v-if=\\\"activeName===\\\'first\\\'\\\" 解决闪屏   改造后代码如下:

    2024年02月07日
    浏览(48)
  • Vue+element ui上传图片和视频并回显,点击放大查看和播放

    1.上传图片 html代码: js代码:

    2024年02月16日
    浏览(58)
  • spring boot +Vue + element-ui实现图片上传和回显

    对于图片上传和显示后台采用SpringBoot实现: 这里要特别注意的是:参数名称必须是 file, 必须是post方式! 前端Vue: 图片上传: 新增: 图片的显示:

    2024年02月13日
    浏览(54)
  • vue学习笔记-关于element ui 安装失败的问题解决

    今天学习vue时,对element ui进行安装,运行 npm install element-ui -S 命令,出现报错: 查看我npm版本,8.9.0,看一些博客说npm版本太高了,需要降低npm的版本,之后,又查了查,看到别的博客,找到了解决的办法: 或者使用 element plus 我两种都安装了,现阶段使用的是elementUI ,看

    2024年02月11日
    浏览(46)
  • vue element ui From表单校验不生效问题解决

    解决方案① el-from 上要使用 :model 不要使用 v-model 解决方案② el-from-item 上是否有加 prop ,并确定 prop 是不是和编写的规则相同 解决方案③ $refs[formName] 与 $refs.formName 注意事项 前者提交的时候要传参 @click=\\\"submitForm(\\\'ruleForm\\\')\\\" 不然不生效 解决方案④网上有人说 未在 data 里面声

    2024年02月11日
    浏览(38)
  • 【前端】解决element-ui的form组件resetFields()方法不生效的问题

    使用 element-ui 的 form 组件,在输入栏较多的时候,有时 resetFields 只能重置一部分输入框的值 给每个值赋值初始值为空即可 例如,需要清除的 :model=\\\"queryForm.bgnTime\\\" 、 :model=\\\"queryForm.endTime\\\" 等一系列的值,那么就不要只定义 queryForm:{} ,而是要把对象下的各个属性赋值初值为空

    2024年02月15日
    浏览(55)
  • 用element-ui中的up-load组件实现简单的图片上传到本地然后回显(从前端到后端)

    一:前端样式以及效果:  前端样式代码如下: 二:后端Controller层  这里的处理逻辑是将前端传递进来的图片交给FileUtil处理,接下来看FileUtil的代码: 首先获取传递进来图片的文件名后缀 然后用UUID将其拼接得到一个新的名字 将图片存入到本地的文件夹下面 接下来返回路

    2024年02月03日
    浏览(50)
  • vue、Element-UI 图标偶发性乱码问题解决方案

    使用vue+element-ui搭建网站时,打包到线上会有偶发性icon乱码的问题, 检查文件dist/css/app.xxx.css,发现所有的图标样式content的文本均异常。如:.el-icon-ice-cream-square:before{content:“”}。所以我们打包后的样式文件是有问题的。 升级sass、配置vue.config.js sass版本要在1.39.0以上 vu

    2024年02月11日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包