一文带你入门KoalaForm最近前端社区又有了新的开源 - KoalaForm，这是一个表单页面的低代码解决方案。以V

企业微信截图_d0a8516b-044a-4edf-8155-a9322f6ebf35.png 最近前端社区又有了新的开源 - KoalaForm表单解决方案。

抱着好奇的心情试用了一下，感觉是个不错的表单方案。

1. KoalaForm是什么

如官网的描述：

对于中后台产品的前端开发来说，最常见的场景无非是开发一个表的CURD页面，当面临多个CURD页面时，你会发现除了字段和接口不同，大概有80%的其他逻辑基本一样，但还是少不了那些胶水代码。

而** Koala Form** 是一个表单页面的低代码解决方案。以Vue3为基础，围绕后台产品的表单场景进行封装，使得开发者仅需关注表单页面的字段和接口。

作为一名中后台前端的开发者来说，这无疑直接戳中了我的要点。平时面对的需求页面就是无尽的表单页面，无聊重复的工作，有了这个Koala Form再也不怕写表单页面啦。

2. 核心优势

高效，开发者关注的是字段、接口和特殊逻辑的处理，无聊的逻辑交给Koala Form
上手简单，内置基础表单场景，开箱即用。
学习成本低，尽可能简单的配置字段和组件
响应式的联动逻辑
强大的自定义渲染
多UI支持，支持插件扩展UI库

3. 开发一个登录表单

这里有一个场景，我们要实现如下效果：

在之前我们需求用组件库的 Form、FormItem、Input 组件来写 Template，然后在 setup 中定义表单状态，现在我们可以使用 KoalaForm 提供的场景useForm实现，使用场景接受类JSON的Schema配置，接下来我们先了解一下配置字段和组件的概念。

3.1 字段描述

字段常见于表单和列表中，为了统一类似的描述，用Field描述字段，关键属性有：

字段名
字段描述
字段规则
字段组件

字段描述在 Form 中会渲染成 FormItem，而在 Table 中会渲染成 TableColumn

3.2 组件描述

组件用ComponentDesc描述，关键属性：

组件名
组件事件
组件属性
children

children是用于实现多个组件的并列和嵌套，形成组件树。

3.3 配置登录的字段

我们渲染useForm场景，传入配置

import { ComponentType, useForm } from '@koala-form/core';
import { defineComponent } from 'vue';
export default defineComponent({
    setup() {
        const { render, modelRef } = useForm({
            form: { props: { labelPosition: 'top' } },
            fields: [
                {
                    name: 'useName',
                    label: '用户名',
                    required: true,
                    components: {
                        name: ComponentType.Input,
                    },
                },
                {
                    name: 'password',
                    label: '密码',
                    required: true,
                    components: {
                        name: ComponentType.Input,
                        props: { type: 'password' },
                    },
                },
                {
                    components: {
                        name: ComponentType.Button,
                        props: { type: 'primary', long: true },
                        events: {
                            onClick: async () => {
                                // do login
                                await validate();
                                console.log(modelRef.value);
                            },
                        },
                        children: '登录',
                    },
                },
            ],
        });
        return render;
    },
});

如上，通过form配置Form组件的属性，fields配置字段用户名和密码，最后配置上登录Button组件，就可以快速得到一个登录表单。在给Button添加点击事件，通过useForm导出的ApimodelRef可以访问表单状态，validate方法校验表单。

4. 联动逻辑

登录表单只有两个字段，比较简单。

假如我们现在有一个场景，通过一个字段的选项控制另一个字段的显示。

我们知道在Vue中提供了v-if、v-show两中，同样在KoalaForm中也了vIf、vShow属性，他们支持Ref<boolean> | When | boolean

4.1 响应式联动

基于Vue的响应式，当我们给vIf、vShow传递Ref<boolean>类型时，可以响应式的隐藏/显示字段或者组件，如下，姓名可以根据字段show进行联动：

const { modelRef } = useForm({
    fields: [
        {
            label: '是否可见',
            name: 'show',
            components: {
                name: ComponentType.Switch,
            },
        },
        {
            label: '姓名',
            name: 'name',
            vIf: computed(() => modelRef.value.show),
            components: {
                name: ComponentType.Input,
            },
        },
    ],
});

4.2 When联动

when是一个函数，接受字符表达式或者函数

字符表达式，可以根据当前上下文的modal属性来编写表达式，比如show === true
函数，函数内部可以写响应式的变量去判断，返回true/false。

import { when } from '@koala-form/core';
const { modelRef } = useForm({
    fields: [
        {
            label: '是否可见',
            name: 'show',
            components: {
                name: ComponentType.Switch,
            },
        },
        {
            label: '姓名',
            name: 'name',
            vIf: when('show'), // or when('show === true') or when(() => modelRef.value.show)
            components: {
                name: ComponentType.Input,
            },
        },
    ],
});

更多的联动知识请参考文档联动基础，比如

组件props联动
规则校验联动

5. 场景组合useCurd

KoalaForm可以通过插件扩展UI库，官方UI插件对组件库的支持度如下

UI库插件	介绍
@koala-form/fes-plugin	Fes Design组件库的桥接插件
@koala-form/element-plugin	Element Plus组件库的桥接插件
And Design Vue	排期中

在官方提供UI库插件中，贴心给出了useCurd的场景组合，一套配置完成curd页面的开发。

// 行为按钮配置
interface Action extends ComponentDesc {
    api?: string; // 接口地址
    reqConfig?: any; // 请求配置
    hidden: boolean; // 隐藏默认按钮 
    before?: (params: Record<string, any>, ...args: any[]) => Record<string, any>; // 请求前回调，修改请求参数
    after?: (params: Record<string, any>) => Record<string, any>; // 请求后回调，修改请求结果
    open?: (params: Record<string, any>) => Record<string, any>; // 打开modal之前回调
}

// curd场景配置
interface CurdConfig {
    name?: string; // 名称，用于modal名称
    query: FormSceneConfig & {
        /** 是否关闭首次自动查询 */
        firstClosed: boolean;
        actionField?: Field | boolean; // 行为按钮域，为false时隐藏按钮域
    };
    table: TableSceneConfig & {
        rowKey?: string; // 列表唯一值的字段，默认id
        selection?: Field | boolean; // 开启列表多选配置
        actionField?: Field | boolean; // 行为按钮域，为false时隐藏整个操作列
    };
    pager?: PagerSceneConfig;
    edit?: FormSceneConfig;
    modal?: ModalSceneConfig;
    actions: {
        query?: Action; // 查询按钮
        reset?: Action; // 重置按钮
        create?: Action; // 新增按钮
        update?: Action; // 更新按钮
        delete?: Action; // 删除按钮
        view?: Action; // 详情按钮
    };
}

关于useCurd中的更多使用技巧，可参考useCurd使用技巧

6.总结

表单场景一直都是前端中后台领域最场景的场景，KoalaForm基于Vue3，字段和组件的很多配置都是可响应式的，使的表单框架使用上更加简单，为前端中后台开发提供了更高效快捷的解决方案。

一文带你入门KoalaForm