微信小程序的表格table

今天开发微信小程序，在微信小程序的开发文档中，找组件，发现没有table组件。当时我的那个心情呀，各种不爽。于是，我打算自己写几个<text></text>来代替表格吧。然后就不小心看到了rich-text，官方给出的名称叫富文本。我仔细一看，它居然就是我苦苦找了很久的table：

1.受信任的HTML节点及属性

2.全局支持class和style属性，不支持id属性。

具体应用：

wxml上需要写代码：

<rich-text nodes="{{nodes}}" bindtap="tap" ></rich-text>

JS上需要写代码：

data：{nodes: [{ //表格配置name: "table",attrs: {style: "  text-align: center",},children: [{name: "thead",attrs: {style: "border:1px solid #000;color:red",class: "red"},children: [{name: "tr",attrs: {style: "border:1px solid #000;color:red",class: "red"},children: [{name: "th",attrs:{},children:[{type:"text",text:"设备名称"}]},{name: "th",attrs: {},children: [{type: "text",text: "设备状态"}]},{name: "th",attrs: {},children: [{type: "text",text: "设备地址"}]}]}],},{name: "tbody",attrs: {style: "border:1px solid #000;color:red",class: "red"},children: [{name: "tr",attrs: {style: "border:1px solid #000;color:red",class: "red"},children: [{name: "td",attrs: {},children: [{type: "text",text: "设备名称"}]},{name: "td",attrs: {},children: [{type: "text",text: "设备状态"}]},{name: "td",attrs: {},children: [{type: "text",text: "设备地址"}]}]}],}], }]
}

效果：

谢谢大家观赏！这是我的群，里面都是程序猿，作为大家交流。解决曾踩过的坑。Q群：789826996

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

微信小程序上实现 table 表格
微信小程序不支持 table 标签,在网上找到一个使用 flex 来实现表格的简明例子,记录一下. table.wxml <view class="table">< ...
微信小程序用表格＜table＞＜/table＞查看数据
微信小程序不支持 table 标签,所以自己写了一个,记录一下方便以后可以直接复制使用图片,可以自己修改样式 index.js,也就是数据,这里写死,可以字自己对接口 ** [ ] index.wx ...
小程序微信统计表格_微信小程序制作表格的方法
本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码参数内容 ...
小程序绘制表格table（表头固定，可上下左右滑动）
某天在写小程序表格时偶然发现小程序没有table标签,在微信小程序社区搜索了一番发现官方给出的说法是view能够满足table样式,足以替代table标签. 以下用原生的小程序代码写了一版简单的表格, ...
微信小程序原生表格组件
cv大法:先找个差不多实现基本功能的组件源代码:GitHub - zss823158062/senx-table: 微信小程序表格组件 lrjTable 然后在上面做优化: 1.优化了按钮点击bu ...
微信小程序自定义表格样式
微信小程序中没有关于table组件的内容,所以如果在小程序中需要用到列表样式时,就可以通过flex布局利用view设置样式模仿table的样式 wxml: <view class="t ...
微信小程序自定义表格
微信小程序表格自定义列与列宽自适应 wxml: <scroll-view scroll-x="true" ><view class="flex&quo ...
android 上下左右滑动的表格,适用小程序的表格table，冻结行，冻结列，可左右，上下滑动...
更新记录 1.0.0(2020-07-22) 1.暂时适用于微信小程序, 2.点击首列跳转或提示 3.首列合并行,首列背景色不一样 4.点击行变背景色平台兼容性 app 微信小程序支付宝小程序百 ...
微信小程序实现表格展示
开发中遇到商品详情页需要展示参数列表,App中我们可以使用table轻松实现列表功能,但是小程序却不支持这个元素,该怎么办呢?我们就用样式来实现: 思路: 先给整个大表格设置border-top:给大 ...

微信小程序的表格table

1.受信任的HTML节点及属性

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

最新文章

热门文章