微信小程序使用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>`;},

遍历使用拼接标签来实现

微信小程序使用table表格相关推荐

微信小程序做Table表格
实现效果:表格头部固定,表格内容数据可以滚动这只是一个最基本的表格框架. 头部 <view class="table"><view class="tr ...
微信小程序-简单table表格
参考资料: https://www.jb51.net/article/156283.htm
uniapp、微信小程序--自定义table
呜呜呜~~~咋说呢,uniapp表格代码搞完转小程序才发现微信小程序没有table!!!哭泣! 本来想用flex布局的,突然想到了css display: table;display: table-c ...
微信小程序上实现表格
微信小程序不支持 table 标签,在网上找到一个使用 flex 来实现表格的简明例子,记录一下. table.wxml <view class="table"> &l ...
微信小程序——多级表头表格
*****因为小程序不支持table,没办法只能通过组件递归的方式实现多级表头的渲染 /*** 这是表头数据格式*/ headerList: [{"name":"city ...
微信小程序实现一个表格table
1.wxml <view class="table"><view class="tr thead"><view class=&qu ...
微信小程序商品报价表格兼容PC端、手机端
1.固定表头.表格行高由内容撑开 2.图片自适应居中.图片预览 3.筛选条件置顶.显示所选的筛选分类 4.触底加载下一页 5.表格文字可复制 6.支持手机横屏.竖屏切换.横屏时隐藏底部 tabbar ...
微信小程序canvas绘制表格
效果图 html <button catchtap="draw">打印</button <button bindtap="saveImg" ...
uniapp微信小程序数据导出表格
项目需求:前端自定义表头并输出表格引用xlsx.core.min.js 但会有警告:[警告⚠] `utils\xlsx.core.min.js` 文件体积超过 500KB,已跳过压缩以及 ES6 ...

微信小程序使用table表格

微信小程序使用table表格相关推荐

最新文章

热门文章