Layui 表单数据渲染

Layui 表单数据渲染可以使用 layui.form 的 render 方法，该方法支持以下参数：

- elem: 指定渲染的表单元素，可以是 DOM 对象，也可以是 CSS 选择器。
- data: 指定渲染的数据，可以是 JSON 对象或数组。
- filter: 指定表单的过滤器，用于监听表单元素的变化。

示例代码如下：

HTML 代码：

<form class="layui-form" lay-filter="example-form">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="example">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

JavaScript 代码：

var data = {
  username: '张三',
  password: '123456'
};

layui.use(['form'], function () {
  var form = layui.form;

  // 渲染表单数据
  form.render(null, 'example-form');

  // 监听表单提交事件
  form.on('submit(example)', function (data) {
    console.log(data.field);
    return false;
  });
});

在以上代码中，我们首先定义了一个 JSON 对象 data，其中包含了用户名和密码的值。然后使用 layui.form 的 render 方法渲染表单数据，其中 elem 参数指定渲染的表单元素为 example-form，也就是我们定义的表单元素的 lay-filter 属性值。最后，使用 form.on 监听表单的提交事件，当用户点击提交按钮时，输出表单的数据。