ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
### 表格组件就是设置表格样式的组件。点击“![](https://img.kancloud.cn/e4/c1/e4c19480b992403fd3f915b50779c1f7_28x27.png)”图标,再点击“表格”,即可创建新的表格,如图6.11; ![](https://img.kancloud.cn/38/9e/389e162733837ca1ab50e28782d65f84_814x533.png) ![](https://img.kancloud.cn/64/b7/64b75769607c3fc5507ce1be6ce5853a_803x38.png) ## **一、组件名称设置** ### 选中该表格组件,在操作界面右侧的“图层名称”处可修改组件的名称,如图6.12。(名称最好要设置一下,方便后期组件管理) ![](https://img.kancloud.cn/05/02/0502a2f63228fa8e14af2552f5f347e5_938x567.png) ![](https://img.kancloud.cn/0b/8e/0b8e26b9215e0531a06df0708fb1ca28_802x39.png) ## **二、字体大小** ### 选中该表格组件,在操作界面右侧的“字体大小”处可设置表格内文字大小,如图6.13。 ![](https://img.kancloud.cn/cb/82/cb829cdf32ddd81b4719279ded348faa_960x552.png) ![](https://img.kancloud.cn/61/5e/615ed5f9a3f8927efa4817b6e9fcf951_801x38.png) ## **三、显示行高** ### 选中该表格组件,在操作界面右侧的“显示行高”处可设置表格的行高,如图6.14。 **备注:从1开始,数字越大,行高越小** ![](https://img.kancloud.cn/cf/55/cf55b5d9b45c9c3d7bcadcedaf6bae06_950x545.png) ![](https://img.kancloud.cn/ee/8c/ee8ca95062805ff42e2098c12504fa42_799x43.png) ## **四、开启滚动** ### 选中该表格组件,在操作界面右侧,打开“开启滚动”开关,输入滚动时间、滚动行数,设置表格的滚动样式,如图6.15。 * ### 滚动时间:多久滚动一次;(单位毫秒) * ### 滚动行数:每滚动一次,滚动几行; ![](https://img.kancloud.cn/ef/3b/ef3b35945baf45f47ce2dc8456e1e260_999x642.png) ![](https://img.kancloud.cn/79/b9/79b91e747bd48c510a2adce8c97e0fef_798x41.png) ## **五、开启排名** ### 开启排名之后,会在页面显示排名样式,如图6.16; ![](https://img.kancloud.cn/4d/4c/4d4c6e9f389afba19fad1f68964d0085_1045x634.png) ![](https://img.kancloud.cn/07/15/0715543e5657c7293f58414df31e4844_803x42.png) ## **六、列显隐** ### 选中该表格组件,在操作界面右侧,打开“开启显隐”开关,可在页面设置显示和隐藏某一列,如图6.17。 ![](https://img.kancloud.cn/f5/84/f58448fc36078a7d0457382af415587f_1023x643.png) ![](https://img.kancloud.cn/10/41/10416a0f5efa9ad4b9b800623d719d23_799x36.png) ## **七、表头设置** ### 选中该表格组件,在操作界面右侧的“表头设置”处可设置表头的样式,如图6.18。 * ### 表头显隐:设置表头是否显示; * ### 表头颜色:设置表头文字颜色; * ### 表头背景:设置表头的背景颜色; ![](https://img.kancloud.cn/bc/df/bcdf433eea3c00f6f8c4b2e8131c3ac7_1002x433.png) ![](https://img.kancloud.cn/b9/54/b9544525f3d76e565f140fed43cce51a_784x38.png) ## **八、表格设置** ### 选中该表格组件,在操作界面右侧的“表格设置”处可设置表格的样式,如图6.19。 * ### 文字颜色:设置表格文字颜色; * ### 表格背景:设置表格的背景颜色; * ### 边框宽度:设置表格边框的粗细大小; * ### 边框颜色:设置表格变宽的颜色; * ### 边框样式:包含实线、虚线和隐藏; * ### 奇行颜色:设置表头奇数行的颜色; * ### 偶行颜色:设置表格偶数行的颜色; ![](https://img.kancloud.cn/52/2a/522a978ed45e5a1ccdc954cb79351758_1021x640.png) ![](https://img.kancloud.cn/94/54/945467ffcee350a05474355d5bb77a80_795x39.png) ## **九、表头数据设置** ### 选中该表格组件,在操作界面右侧的最底下,可设置表头名称,key值要跟接口中的想对应。 **备注:如果接口传过来的数据是3列,你需添加3行数据,并且key值要跟接口中参数想对应,如图6.191、6.192;** ![](https://img.kancloud.cn/e1/70/e170909c941408c949b4e6c78e5cf0ce_1042x418.png) ![](https://img.kancloud.cn/2f/a2/2fa2512682e34ea3918ddd5dcade3f5f_796x44.png) ![](https://img.kancloud.cn/59/f3/59f3fa68155639526459f15ddd5e995d_672x449.png) ![](https://img.kancloud.cn/91/83/9183a3f104edd0eca541753e86673014_796x41.png) ## **十、接口设置** ### 选中该表格组件,在操作界面右侧,点击“![](https://img.kancloud.cn/e6/f9/e6f9502306b50d834fffeeb54025ae0e_305x54.png)”,可设置接口,如图6.193。 ### 1\. 数据类型 ### 数据类型分为静态数据和动态数据; * ### 静态数据:写死的数据; * ### 动态数据:会随着接口传过来的数据实时变化;(一般这种比较常用) ### 2\. 接口地址 ### (1)静态数据,接口地址传过来的内容要符合以下格式: ~~~ [{"name":"张梦","role":"访客","way":"人脸","time":"2018-11-01"},{"name":"李阳荣","role":"业主","way":"APP","time":"2018-11-01"},{"name":"张无双","role":"访客","way":"人脸","time":"2018-11-01"},{"name":"李阳","role":"业主","way":"APP","time":"2018-11-01"}] ~~~ ### (2)动态数据,接口地址传过来的内容要符合以下格式: ~~~ {"data":[{"name":"张梦","role":"访客","way":"人脸","time":"2018-11-01"},{"name":"李阳荣","role":"业主","way":"APP","time":"2018-11-01"},{"name":"张无双","role":"访客","way":"人脸","time":"2018-11-01"},{"name":"李阳","role":"业主","way":"APP","time":"2018-11-01"}]} ~~~ ### 3\. 刷新时间 ### 这个参数主要针对动态数据设置的,完成数据的实时更新。 * ### 如果你想设置成5秒刷新一次,可以将刷新时间设置成“5000”; ### 4\. 刷新数据 ### 这个参数主要是重新请求以下接口,完成数据的更新。 ![](https://img.kancloud.cn/cd/ab/cdab2990b24a86808e53b27cc5c2f8b4_688x1040.png)