Problem: Applet rich text tag rich-text parsing table does not have a border

  • Solution: Use the external plug-in MP-html
  • Address: github.com/jin-yufeng/…

Installation mode selection:

Copy the code package (dist/mp-weixin) of the corresponding platform in the source code to the components directory and rename it as the MP-html directory

Just import it on the required page

<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>Copy the code

Table contents are present but border is missing

1. Replace HTML with regular expression and add border to table

this.html = html.replace(/<table/g, '<table border="1" cellspacing="0" style="border-collapse:collapse"')

2. Use properties to set the default border style for the table

<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;'
        }
    }
})

Copy the code