## 问题:小程序富文本标签 rich-text 解析table没有border * 解决方法:使用外部插件mp-html * 地址:https://github.com/jin-yufeng/mp-html ### 安装方式选择: 将源码中对应平台的代码包(`dist/mp-weixin`)拷贝到`components`目录下,更名为`mp-html`目录 ### 在需要的页面引入即可 ``` <template> <view> <mp-html content="{{html}}" /> </view> </template> { usingComponents: { mp-html: '~@/components/mp-html/index' } } <script> import wepy from '@wepy/core' wepy.page({ data: { html: '<div>Hello World!</div>' } }) </script> ``` ### 正常解析富文本发现table的内容有了但是border不见了 #### 1. 正则表达式替换html,给table添加border `this.html = html.replace(/<table/g, '<table border="1" cellspacing="0" style="border-collapse:collapse"') ` #### 2. 通过属性给表格设置默认的边框样式 `<mp-html :tag-style="tagStyle" />` ``` import wepy from '@wepy/core' wepy.page({ data: { tagStyle: { table: 'border-top: 1px solid gray; border-left: 1px solid gray;', th: 'border-right: 1px solid gray; border-bottom: 1px solid gray;', td: 'border-right: 1px solid gray; border-bottom: 1px solid gray;' } } }) ```