优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。
《数据加工/转化详解》
▽
一、表达式
Visual Builder在处理数据时，大部分情况都可以使用表达式，或者微应用函数满足场景；表达式的使用，大多数情况都是针对相对简单的场景，如果场景过于复杂，我们还是推荐使用微应用函数，因为您不仅可以在函数内拥有更多高级语法到操作，还可以针对您的函数编写测试用例，加强微应用的健壮性。
在之前章节已经介绍过一些简单表达式的编写以及它们的含义，本节课讲介绍更加高级的用法，回到我们的编排，我们将给我们的表格增加一列创建时间，那么我们要怎么做呢？
属性面板-属性: columns: # 略... # 以下ctime为新增列 - dataIndex: ctime key: ctime title: 创建时间 - dataIndex: operator title: 操作 key: operator useChildren: '[operator]'
1.2 DATA数据修改
# 查询字段入参增加 ctimeArgs: - TASK_FOR_VB_LESSON - fields: - name - state - assignee - reporter - description # 新增查询字段 - ctime page: '${QUERY.page=1|number}' pageSize: '${QUERY.pageSize=20|number}' query: <% CTX.query %>
修改完毕后， 我们将在预览画布中看到数据更新，但是这个时间太长了，并不是我们想要的，那怎么办呢？
这个时候我们可以使用表达式，对时间进行格式化，只展示日期，下面看下编排怎么修改吧。
1.3 Table表达式加入解析ctime能力
属性面板-属性: # 其他不变 dataSource: |- <% "track context", { # 解构， ...CTX.taskList ?? {}, # CTX.taskList.list 遍历，将其中的ctime进行处理 list: CTX.taskList?.list?.map(item => ({ ...item, ctime: item.ctime.split(" ").shift() })) } %>
处理完后，数据就变成我们预期的输出啦，如下图：
二、微应用函数
前文说过表达式大多数情况下只适用于一些简单场景，如果是比较复杂的场景，我们推荐使用微应用函数会比较好，推荐同学有兴趣可以学习 《微应用函数》，那么我们要怎么编写一个函数呢？
2.1 新增函数
在左侧菜单选择函数菜单，然后点击新增函数按钮，函数名为 test, 类型为 typescript, 点击确定创建函数成功，然后编写我们的方法，具体如下：
function test( params: Params = { list: [], totol: 0, page: 1, pageSize: 20, }): Params { const colorMap = { 待研发: "blue", 研发中: "yellow", 研发完成: "green", }; const arr = params.list.map((item) => ({ ...item, stateColor: colorMap[item.state], ctime: item.ctime.split(" ").shift(), }));
return { ...params, list: arr, };}
interface Params { list: Array<any>; totol: number; page: number; pageSize: number;}最后点击保存，然后点击build & push 按钮，编排即可使用该函数
2.2 编排修改
属性面板-属性: # 只需要改这行 dataSource: '<% "track context", FN.test(CTX.taskList) %>'
在table构件下找到 [state] 插槽下的 presentational-bricks.brick-tag 构件，属性修改如下:
属性面板-属性: # 只增加 color 属性 color: <% DATA.rowData.stateColor %> showCard: false tagList: - <% DATA.rowData.state ?? "待研发" %>最后看下编排预览画布，是符合我们的预期的
三、结语
至此，简单的数据加工转化就完结啦，这个章节对与微应用编排是相当重要的哟～
