iview和element表格单元格渲染html

实现：将富文本编辑器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渲染详细知识见我另外一篇文章《Vue原理之虚拟DOM和render函数》

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

达到要求！

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

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