盘古低代码

循环渲染 ​

在开发过程中，我们希望能够通过定义数组变量实现循环渲染。类似 Vue 中的 v-for 指令，盘古能够基于一个数组实现循环渲染的功能。

介绍 ​

盘古设计器支持循环渲染，在组件的右侧工具栏 - 高级 - 循环中可找到此配置项。循环数据以数组的形式呈现，在渲染时能够读取数组中的每一项进行渲染。

  • 循环数据 - 可以直接编辑或绑定循环数据，数据可对组件右侧工具栏中所有可绑定数据的属性值进行设定；

  • 迭代变量名 - 类似 v-for 中的 item，是循环渲染时的迭代项；

  • 索引变量名 - 类似 v-for 中的 index，是循环渲染数组的索引；

  • 循环 key - 类似 v-for 中的 key，是循环渲染时的唯一标识符；

示例场景 ​

给出以下两种常见的循环渲染场景：

简单循环渲染场景 ​

渲染时可从循环渲染的数组中，获取每一项的值来对组件进行循环渲染。向中间编辑区拖入一个按钮组件，创建如下循环数据，并将该数据绑定到按钮组件的循环数据属性上：

为按钮组件的标题绑定循环渲染时的 item：

预览显示，页面根据循环渲染数组创建了三个对应标题的按钮：

动态表单场景 ​

盘古还支持对表单进行循环渲染。向中间编辑区拖入两个按钮、一个表单容器、一个容器和两个输入框：

定义循环渲染数据，并将该数据绑定到容器组件的循环数据属性上：

分别为两个输入框的编辑默认值属性绑定迭代项的 name 和 age：

分别为两个输入框的数据字段属性进行动态绑定，以避免在获取表单数据时只显示最新修改的数据：

为新增数据按钮配置点击时触发的事件：

js
function action(ctx, params) {
  ctx.state.formData.push({
    name: "",
    age: "",
  });
}

为获取数据按钮配置点击时触发的事件，其中 validate 方法中的参数 key 为表单容器的唯一标识：

js
function action(ctx, params) {
  ctx.validate("1725617072554", function (res, data) {
    //校验表单
    let arr = [];
    for (let i = 0; i < Object.keys(data).length / 2; i++) {
      //整理表单数据
      arr.push({
        name: data[`name${i}`],
        age: data[`age${i}`],
      });
    }
    console.log(arr);
  });
}

预览时点击新增数据按钮，页面中会新增一组表单，用户可在表单中输入数据。点击获取数据按钮后，开发者工具中可以看到当前通过校验的表单数据：