腾讯无极使用干货入门版

首先要睡饱
67 阅读3分钟

书接上文。

上一篇文章介绍了一些无极的使用指南，今天在使用的时候，发现还有一些我平时用的比较多的方法可以拿出来再唠唠。

  • 表格字段更新 在使用数据源拖出表格的时候，会遇到如果字段不够或是要更新的场景，那么这时在数据源中填补上/修改对应的字段后，可以直接拉到想要放置的位置上，（此时系统会提醒点击提交后修改） image.png

提交数据源字段修改后，回到画布可以发现，会有一个检测到变更的弹窗提醒。 image.png

但是会发现点击更新后好像只更新了数据源的内容，而表格组件并没有展示我修改过的字段信息 image.png

在认真阅读过使用文档之后我发现，需要手动添加字段，那么接下来演示一下如何手动补充已修改字段。 image.png

在“属性”——“列详细设置”——“添加列”——补充上字段名称&映射的字段——拖拽到相应位置 image.png

在表格组件中中，下钻到对应位置上，在数据源中拖出UI组件放置到相应位置上 image.png

image.png

此时对应的字段就会展示在表格中啦~

image.png

  • 表格自定义文案 当使用表格组件是，发现内容与数据源中添加的内容不符时，可以进行自定义修改表格内容 双击下钻需要修改的内容——在数据“绑定值”处点击“解绑” image.png

image.png

将“绑定值”转化为可以自行编辑表达JS逻辑的“插值表达式”，在这里用一个简单的判断地点字段为true时显示【想去的地方】，否则显示【一般】 image.png

  • 组件可见状态 先在表格数据源&组件中增加一个状态栏的字段，填入“去过”“没去过”两种标签。可以先将的样式调整成为常见的UI组件类型，方法与调整文字的方法一致，双击下钻“标签”——样式“CSS”中点击条件样式 image.png

把标签按颜色进行区别——“去过”标签为绿色，“没去过”标签为橙色 image.png

前序的准备工作做好之后，接下来就可以根据每行数据的标签来区分状态。

举例的这个内容不需要删除功能，因此将“删除”按钮替换成为“查看”按钮 image.png

接下来调整按钮的【可见状态】，在表格中“去过”标签对应“查看”按钮，反之则对应“编辑”按钮

选择行为页——按条件决定是否可见——将两个按钮不同的可见状态写入 image.png image.png

此时点击预览，表格已经按预期，显示出标签与操作的对应关系啦~ image.png

  • 为不同状态配置不同的弹窗页

    • “去过”标签对应的“查看”弹窗，配置只支持查看详细信息 image.png

    -“没去过”标签对应“编辑”弹窗，点击弹窗按钮后状态更新为“去过”标签。 用上篇文章中提到的新建弹窗的方法配置一个新的弹窗

image.png

image.png

avatar
文章
阅读
粉丝