如何使用vue-form-generator实现多字段同行的多列表单布局？

嘿，我来给你说清楚怎么把vue-form-generator默认的单列表单改成多列布局，主要有两种常用的方法，都很简单：

方法一：使用字段组（fieldGroup）实现多列 #

vue-form-generator支持通过fieldGroup把多个字段归为一组，并指定组内的列数，这样组里的字段就会自动排在同一行。

比如要做一个两列/三列的表单，你可以在schema里这样写：

const schema = {
  fields: [
    // 单字段（占整行）
    {
      type: "input",
      label: "用户名",
      model: "username",
      required: true
    },
    // 两列字段组
    {
      type: "fieldGroup",
      label: "基础信息",
      columns: 2, // 指定组内分为2列，字段自动均分宽度
      fields: [
        {
          type: "input",
          label: "姓名",
          model: "fullName"
        },
        {
          type: "input",
          label: "邮箱",
          model: "email",
          validator: "email"
        }
      ]
    },
    // 三列字段组
    {
      type: "fieldGroup",
      label: "地址信息",
      columns: 3,
      fields: [
        {
          type: "input",
          label: "省份",
          model: "province"
        },
        {
          type: "input",
          label: "城市",
          model: "city"
        },
        {
          type: "input",
          label: "区县",
          model: "district"
        }
      ]
    }
  ]
};

组件调用还是和原来一样：

<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>

方法二：自定义列宽类（colClass） #

如果你需要更灵活的列宽控制（比如某列占1/3，另一列占2/3），可以给单个字段添加colClass属性，用Bootstrap的栅格类来定义宽度（vue-form-generator默认兼容Bootstrap的栅格系统）。

示例代码：

const schema = {
  fields: [
    {
      type: "input",
      label: "用户名",
      model: "username",
      colClass: "col-md-12" // 占整行宽度
    },
    {
      type: "input",
      label: "姓名",
      model: "fullName",
      colClass: "col-md-4" // 占1/3宽度
    },
    {
      type: "input",
      label: "邮箱",
      model: "email",
      validator: "email",
      colClass: "col-md-8" // 占2/3宽度
    },
    {
      type: "input",
      label: "省份",
      model: "province",
      colClass: "col-md-6" // 占1/2宽度
    },
    {
      type: "input",
      label: "城市",
      model: "city",
      colClass: "col-md-6" // 占1/2宽度
    }
  ]
};

要是你不用Bootstrap，也可以自己写对应的栅格CSS类，然后通过colClass指定就行，只要样式能实现多列布局就ok。

内容的提问来源于stack exchange，提问作者user2423706