微信小程序的表格table

 ̄綄美尐妖づ 提交于 2019-12-02 15:52:38

今天开发微信小程序,在微信小程序的开发文档中,找组件,发现没有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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!