微信小程序使用table表格

做小程序项目中遇到这种需要合并行和并列来展示数据
但是小程序没有table标签 不能使用合并行合并列
找了很多发现小程序中有一个标签和 VUE中的 v-html是一样的功能

<rich-text nodes="{{tableHtml}}"></rich-text>

rich-text标签可以渲染html代码,这样实现需要后端数据格式的配合

demoList:[
      [
        {name:"9时",colspan:'',rowspan:'',type:'1'},
        {name:'死神',colspan:3,rowspan:2,type:'0'},
        {name:'',colspan:'',rowspan:'',type:'0'},
        {name:'',colspan:'',rowspan:'',type:'0'},
      ],
      [
        {name:"10时",colspan:'',rowspan:'',type:'1'},
        {name:'',colspan:'',rowspan:'',type:'0'},
        {name:'',colspan:'',rowspan:'',type:'0'},
        {name:'',colspan:'',rowspan:'',type:'0'},
      ],
      [
        {name:"11时",colspan:'',rowspan:'',type:'1'},
        {name:'海贼',colspan:1,rowspan:1,type:'0'},
        {name:'火影',colspan:2,rowspan:2,type:'0'},
        {name:'',colspan:'',rowspan:'',type:'0'},
        
      ],
      [
        {name:"12时",colspan:'',rowspan:'',type:'1'},
        {name:'',colspan:'',rowspan:'',type:'0'},
        {name:'',colspan:'',rowspan:'',type:'0'},
        {name:'',colspan:'',rowspan:'',type:'0'},
      ]
    ],
    divStyle:"width:100%;height:100%;background:#38ADFF;display:flex;justify-content: center;align-items: center;border-radius: 8px;color:#fff",
    timeStyle:'width:50px',
    tableHtml:'<table style="width: 100%;table-layout: fixed;">',
//生成table的html 元素
    initHtml(){
      this.demoList.map(item=>{
        this.tableHtml+=`<tr>`;
        item.map(val=>{
          if(val.name){
            this.tableHtml+=`<td style="height:30px" colspan=${val.colspan} rowspan=${val.rowspan}><div style="${val.type=='0'?this.divStyle:this.timeStyle}">${val.name}</div></td>`;
          }
        })
        this.tableHtml+=`</tr>`
      })
      this.tableHtml+=`</table>`;
    },

遍历使用拼接标签 来实现