今天开发微信小程序,在微信小程序的开发文档中,找组件,发现没有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
来源:CSDN
作者:程序猿_小天
链接:https://blog.csdn.net/u011798443/article/details/80539852