配置驱动页面：表单、表格到「低代码」的第一步

wuwenzen@outlook.com (wuwj) — Tue, 15 Jun 2021 00:00:00 +0000

在中后台项目里，经常会出现这样的需求：

一堆「结构相似、字段不同」的表单；
一堆「上面查询、下面表格」的列表页。

如果每个页面都手写一次：表单 + 校验 + 表格列 + 操作按钮，不仅枯燥，还很难保持统一风格。

这篇文章讲的是我在项目里做的一次尝试：

用一份 JSON 配置描述页面，再写一个「解释器组件」负责渲染表单和表格。
这是往低代码方向迈出的第一小步。

1. 先从「配置表单」开始

以一个常见的查询表单为例，我们希望用一份配置来描述：

有哪些字段；
每个字段是什么类型（输入框、下拉、日期范围等）；
默认值、占位文案、选项等等。

1.1 配置结构示例

// types.ts
export type FieldType = 'input' | 'select' | 'daterange' | 'switch';

export interface FormField {
  prop: string;
  label: string;
  type: FieldType;
  placeholder?: string;
  options?: Array<{ label: string; value: string | number }>;
  span?: number; // 栅格宽度
  required?: boolean;
}

某个页面里的配置：

// orderListPageConfig.ts
export const searchFields: FormField[] = [
  { prop: 'keyword', label: '关键词', type: 'input', placeholder: '订单号/客户名' },
  { prop: 'status', label: '状态', type: 'select', options: [
    { label: '全部', value: '' },
    { label: '待支付', value: 'PENDING' },
    { label: '已支付', value: 'PAID' },
  ]},
  { prop: 'dateRange', label: '创建时间', type: 'daterange' },
];

1.2 通用 FormRenderer 组件

<!-- FormRenderer.vue（示意） -->
<template>
  <el-form :model="model" class="config-form" label-width="90px">
    <el-row :gutter="16">
      <el-col
        v-for="field in fields"
        :key="field.prop"
        :span="field.span || 8"
      >
        <el-form-item :label="field.label" :prop="field.prop">
          <component
            :is="getComponent(field)"
            v-model="model[field.prop]"
            v-bind="getComponentProps(field)"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="$emit('search', model)">查询</el-button>
      <el-button @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

getComponent 根据类型返回不同组件：

复杂表单实战：我在项目里踩过的 Vue 坑

wuwenzen@outlook.com (wuwj) — Tue, 18 Jun 2019 00:00:00 +0000

表单是前端最常见、也最容易写成一坨的东西。简单表单随便放几个 v-model 都能跑，一旦字段多起来、存在动态联动、跨步校验，代码就开始失控。

这篇文章基于我做过的一个"几十个字段 + 多步 + 条件显示"的表单项目，总结一些在 Vue 里踩过的坑和解决方案。

需求背景：一个略显「超标」的表单

当时的表单大概长这样：

3 个步骤：基础信息 → 业务信息 → 确认提交
每步有 8～15 个字段
部分字段需要「根据上一步选择动态显示或隐藏」
有跨字段校验（比如：结束日期 ≥ 开始日期）
需要支持「草稿保存」+「再次打开自动回填」

如果一股脑全写在一个组件里，大概会出现：

data 里一个巨大的 form = { ... }。
各种 watch 做联动逻辑。
methods 里各种 validateXXX，互相依赖。
维护成本爆炸。

核心思路：拆数据结构 + 拆 UI + 拆校验

1. 数据结构要先定清楚

我一般会在一开始，就写出一个完整的 formModel：

const defaultForm = () => ({
  basic: {
    name: '',
    idNo: '',
    phone: '',
  },
  business: {
    type: '',
    amount: null,
    startDate: '',
    endDate: '',
  },
  extra: {
    agree: false,
    comment: '',
  },
});

在组件里：

表单 on Saiga