博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iview和element表格单元格渲染html
阅读量:7011 次
发布时间:2019-06-27

本文共 567 字,大约阅读时间需要 1 分钟。

实现:将富文本编辑器tinymce带html标签的字符串内容显示在表格单元格内

自己在用iview做一个内部管理系统时用到到了富文本编辑器tinymce,一般富文本编辑器最终的内容都是带html标签的字符串,然后存入数据库,前端再显示,如果在一般组件或块内显示这种带html格式的文本,可以直接用Vue的指令v-html即可,但是iview的table组件API中显示列的数据的话要么纯文本,要么用Render渲染特殊的文本,例如像官方例子中的按钮:

但是像下图中tinymce中生成的带html结构的文本如何渲染?

编辑器中的内容:

实际生成的html结构的内容:

肯定不能用v-html,千万别想着用该指令去渲染,切记:在Vue的Render函数中本身不存在指令不指令的。 

那么该如何实现?用html的innerHtml属性,方法如下:

用createElement函数第二个参数数据对象中的domProps属性!

createElement函数以及Render渲染详细知识见我另外一篇文章

通过上面的方法渲染后的结果如下:

达到要求!

ps: 对于将tinymce封装为vue组件有问题的童鞋可以给我留言,我也遇到了不少坑。

转载于:https://juejin.im/post/5cd99f11e51d456cec195f17

你可能感兴趣的文章
一次搞明白JavaScript this关键字
查看>>
9coin可以拯救熊市吗?不,我们只想救你!
查看>>
织梦内核高端网站建设网络设计公司网站源码
查看>>
云存储安全的最佳实践
查看>>
chrome浏览器调试Android手机的网页
查看>>
从执行上下文深入理解闭包
查看>>
根据数组中对象的某个属性值排序
查看>>
从实践认识修饰符
查看>>
python开发-多个装饰器的执行顺序
查看>>
React Native 中的状态栏(Android沉浸式)
查看>>
Java版-数据结构-栈
查看>>
Xcode9使用新体验
查看>>
3分钟快速了解海量数据分析产品-日志易
查看>>
JavaScript基础入门笔记
查看>>
前端零基础教学开始第五天 05 -day 三种布局技巧与浮动 C3样式 阴影
查看>>
你经常遇到的Android 日常开发问题总结
查看>>
现在国内IT行业是不是程序员过多了?
查看>>
Python爬虫--- 1.5 爬虫实践: 获取百度贴吧内容
查看>>
SpringMVC工作流程
查看>>
基础知识 第四节 常用的指令
查看>>