ol-base-components

Appearance

Form 表单组件 ​

ol-form 组件支持与 Swagger API 集成，通过交互式命令行方式自动生成表单配置，极大提升开发效率。

效果图 ​

效果图

基础用法 ​

vue
<template>
  <div>
    <ol-form
      :url="swaggerUrl.postUserUser"
      :form="form"
      @onSubmit="handleSubmit"
      @onCancel="handleCancel"
    />
  </div>
</template>

<script>
import { postUserUser } from "@/api/modules";
import { User } from "@/api/swagger";

export default {
  data() {
    return {
      swaggerUrl: User,
      form: {
        type: 1, // 0-详情，1-新建，2-编辑
        title: "用户信息",
        value: {
          name: "",
          email: "",
          phone: "",
          status: true,
        },
        rules: {
          name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        },
        model: [], // 会自动从 Swagger 生成
      },
    };
  },
  methods: {
    async handleSubmit({ form, data }) {
      try {
        await postUserUser(data);
        this.$message.success("保存成功");
        this.$emit("success");
      } catch (error) {
        this.$message.error("保存失败");
      }
    },
    handleCancel() {
      this.$emit("cancel");
    },
  },
};
</script>

自定义表单配置 ​

虽然 Swagger 会自动生成表单配置，但你仍然可以自定义表单项：

vue
<template>
  <div>
    <ol-form
      :url="swaggerUrl.postUserUser"
      :form="form"
      @onSubmit="handleSubmit"
    />
  </div>
</template>

<script>
import { UserApi } from "@/api/swagger";

export default {
  data() {
    return {
      swaggerUrl: UserApi,
      form: {
        type: 1,
        title: "用户信息",
        value: {
          name: "",
          email: "",
          department: "",
          role: "",
          status: true,
        },
        rules: {
          name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        },
        model: [
          // 自定义表单项配置，会与 Swagger 生成的配置合并
          {
            type: "input",
            label: "姓名",
            prop: "name",
            required: true,
            placeholder: "请输入用户姓名",
          },
          {
            type: "select",
            label: "部门",
            prop: "department",
            children: [
              { key: "tech", value: "技术部" },
              { key: "hr", value: "人事部" },
              { key: "finance", value: "财务部" },
            ],
          },
          {
            type: "switch",
            label: "状态",
            prop: "status",
            props: {
              activeText: "启用",
              inactiveText: "禁用",
            },
          },
          // 自定义插槽
          {
            type: "slot",
            label: "自定义内容",
            name: "customSlot",
          },
        ],
      },
    };
  },
  methods: {
    handleSubmit({ form, data }) {
      console.log("表单数据：", data);
      // 处理表单提交
    },
  },
};
</script>

API说明 ​

Props ​

参数说明类型可选值默认值
url接口地址，用于获取 Swagger 配置和调用 API 接口。接口选择优先级：新增 > 编辑 > 详情string—""
form表单配置对象object——
defaultValue表单默认值object—{}
showBtn是否启用底部按钮（取消/确定）boolean—true

form 属性 ​

参数说明类型可选值默认值
type表单类型number0/1/21
title表单标题string——
value表单数据对象object—{}
rules表单验证规则object—{}
attrsel-form 的属性配置object—{}
model表单项配置数组（详见下方 model 表单项配置）array—[]

model 表单项配置 ​

参数说明类型可选值默认值
type表单项类型stringinput/number/textarea/switch/radio/date/treeSelect/select/inputSpecial/slot—
label标签文本string——
prop字段名string——
placeholder占位符文本string——
required是否必填boolean—false
hidden是否隐藏boolean—false
clearable是否可清空boolean—true
readonly是否只读boolean—false
disabled是否禁用boolean—false
listeners事件监听器配置object—{}
children选项数据（用于 select/radio/treeSelect）array—[]
autosize自适应内容高度（用于 textarea）object——
showPassword是否显示切换密码图标（用于 input）boolean—false
length最大输入长度（用于 textarea）number——
name插槽名称（用于 slot 类型）string——
change值变化回调函数function——
keyup键盘事件回调函数function——
props组件属性（继承elementui当前组件的所有属性）object—{}

type 支持的类型 ​

类型说明对应组件
input文本输入el-input
number数字输入el-input-number
textarea文本域el-input (type="textarea")
select下拉选择el-select
radio单选框el-radio-group
switch开关el-switch
date日期选择el-date-picker
treeSelect树形选择Tree-select
inputSpecial特殊输入框自定义布局
slot自定义插槽自定义内容

Events ​

事件名说明回调参数
onSubmit表单提交时触发form 表单配置 data 表单数据
onCancel取消按钮点击时触发—
selectChange选择器值变化时触发obj 当前项配置 val 变化后的值

Methods ​

方法名说明参数
validate对整个表单进行校验的方法，返回 Promise—
resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果—
clearValidate移除表单项的校验结果props

表单类型说明 ​

类型值说明行为特征
0详情表单只读模式，不显示提交按钮
1新建表单默认模式，显示提交和取消按钮
2编辑表单编辑模式，显示提交和取消按钮

布局规则 ​

组件会根据表单项数量自动调整布局：

表单项数量布局方式宽度设置
≤6项单列布局100%
7-10项双列布局50%
11-18项三列布局33.33%
>18项四列布局25%
textarea类型单列布局100%

特殊配置说明 ​

inputSpecial 类型配置 ​

用于特殊的三段式输入框布局：

javascript
{
  type: "inputSpecial",
  label: "位置信息",
  layerprop: "layer",    // 第一段字段名
  rowprop: "row",        // 第二段字段名
  columnprop: "column",  // 第三段字段名
  clearable: true
}

props.disabled 函数形式 ​

javascript
{
  type: "select",
  label: "角色",
  prop: "role",
  props: {
    disabled: ({ item, form }) => {
      return form.value.status === false;
    }
  }
}

listeners 事件监听器 ​

javascript
{
  type: "select",
  label: "部门",
  prop: "department",
  listeners: {
    change: (item, value) => {
      // 处理值变化事件
      console.log('部门变化:', value);
    }
  }
}

keyup 事件处理 ​

javascript
{
  type: "input",
  label: "搜索关键词",
  prop: "keyword",
  keyup: ({ event, item, form }) => {
    // 处理键盘事件
    console.log('键盘事件:', event);
  }
}

基于 MIT 许可发布

版权所有 © 2025-present lijiapeng