组件配置项(Component Configuration Items)

config.type

type字段用于控制formkit加载相关的模块，字段类型：String,下面将介绍type相关合法值。

类型	可选值	默认
String	见下描述	-

The type field is used to control the module loaded by the formkit, field type: String, the legal values associated with type are described below.

select

select选择器, 当选项过多时，使用下拉菜单展示并选择内容。

select selector, when there are too many options, use the drop-down menu to display and select the content.

<formkit
    :config="[
        {
            type: 'select',
            label: 'Selector',
            key: 'select1',
            props: { placeholder: 'Pls select', clearable: true },
            options: [
                { name: 'Selector item one', id: 1 },
                { name: 'Selector item two', id: 2 },
                { name: 'Selector item three', id: 3 }
            ]
        }
    ]"
    v-model="dataset">
</formkit>

Select也可通过requester字段用于动态获取options

Select can also be used to dynamically fetch options through the requester field.

Template

<formkit
    :config="[
        {
            type: 'select',
            label: 'Selector',
            key: 'select1',
            props: { placeholder: 'Pls select', clearable: true },
            requester: fetchOptions,
            handler: (response: any) => response?.items || []
        }
    ]"
    v-model="dataset">
</formkit>

TypeScript

<script setup lang="ts">
import formkit from 'element-plus-formkit';
import { ref, computed } from 'vue';

const dataset = ref({})

function fetchOptions() {
    return new Promise((r, j) => {
        setTimeout(() => {
           r({
            code: 200,
            items: [
                { name: 'Selector item one', id: 1 },
                { name: 'Selector item two', id: 2 },
                { name: 'Selector item three', id: 3 }
            ]
           })
        }, 2000)
    })
}
</script>

handler作为额外的辅助字段，它会在requester完成后调用，用于将requester的返回值处理成ELselect option可执行的值，当然如果您的requester返回值符合ELselect option期望类型便不需要使用它。

The handler is an additional helper field that is called after the requester completes, and is used to process the return value of the requester into a value that can be executed by the ELselect option, although it is not necessary to use it if your requester returns a value of the type that is expected by the ELselect option.

checkbox

在一组备选项中进行多选。

Make multiple choices in a set of alternatives.

<formkit
    :config="[
        {
            type: 'checkbox',
            label: 'Checkbox',
            key: 'checkbox',
            options: [
                { name: 'Selector item one', id: 1 },
                { name: 'Selector item two', id: 2 },
                { name: 'Selector item three', id: 3 }
            ]
        }
    ]"
    v-model="dataset">
</formkit>

showAllCheck属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果

The showAllCheck attribute is used to indicate the indeterminate state of the checkbox, and is generally used to achieve the effect of full check.

output:

<formkit
    :config="[
        {
            type: 'checkbox',
            label: 'Checkbox',
            key: 'checkbox',
            props: { showAllCheck: true },
            options: [
                { name: 'Selector item one', id: 1 },
                { name: 'Selector item two', id: 2 },
                { name: 'Selector item three', id: 3 }
            ]
        }
    ]"
    v-model="dataset">
</formkit>

提示

当然当您的options需要通过动态获取时，您依旧可以使用requester配合handler辅助完成，详细参考select requester

Of course, when your options need to be fetched dynamically, you can still use requester with the help of handler to accomplish this select requester

radio

在一组备选项中进行单选

Make a single choice from a set of alternatives

output:

<formkit
    :config="[
        {
            type: 'radio',
            label: 'Radio',
            key: 'radio',
            options: [
                { name: 'Selector item one', id: 1 },
                { name: 'Selector item two', id: 2 },
                { name: 'Selector item three', id: 3 }
            ]
        }
    ]"
    v-model="dataset">
</formkit>

提示

当然当您的options需要通过动态获取时，您依旧可以使用requester配合handler辅助完成，详细参考select requester

Of course, when your options need to be fetched dynamically, you can still use requester with the help of handler to accomplish this select requester

inputNumber

数字输入框, 仅允许输入标准的数字值，可定义范围。详细api参数请参照ElInputNumber API

Numeric input box, only standard numeric values are allowed, range can be defined. Please refer to ElInputNumber API for detailed api parameters.

output:

<formkit
    :config="[
        {
            type: 'inputNumber',
            label: 'InputNumber',
            key: 'inputNumber',
            props: {
                min: 0,
                max: 10,
                style: { width: '100%' },
                prefix: 'prefix',
                suffix: 'suffix'
            }
        }
    ]"
    v-model="dataset">
</formkit>

注意

当您需要使用ElInputNumber 原生API时，需要包裹props使用

When you need to use the ElInputNumber native API, you need to wrap props to use the

address

具有层级的区域地址选择器, 使用此模块需要传入requester作为数据源

Hierarchical zone address selector, using this module requires passing in requester as the data source.

<formkit
    :config="[
        {
            type: 'address',
            label: 'Address',
            key: 'address',
            props: {
                style: { width: '50%' },
                level: 2,
                placeholder: 'Pls Select Address',
                requester: (pid: number) => {
                    // return useAxios().get(`/default/region/agent-regions?pid=${pid}`)
                    return fetchOptions()
                },
                handler: (response: any) => response?.items || []
            }
        }
    ]"
    v-model="dataset">
</formkit>

注意

区别于select、checkbox、radio等需要动态获取options的模块，address模块的requester，需要包裹props使用

Unlike select, checkbox, radio, and other modules that need to get options dynamically, the address module has a requester that needs to be wrapped around props to be used.

文字弹出层

Text Popup Layer

提示

当然当您的options需要通过动态获取时，您依旧可以使用requester配合handler辅助完成，详细参考select requester

Of course, when your options need to be fetched dynamically, you can still use requester with the help of handler to accomplish this select requester

remoteSearchSelect

具备远程查询功能的select下拉选择器

Select dropdown selector with remote query functionality

output remoteSearchSelect:

output onChooseCallback:

<formkit
    :config="[
        {
            type: 'remoteSearchSelect',
            label: 'Remote Search Select',
            key: 'remoteSearchSelect',
            props: {
                labelKey: 'name',
                valueKey: 'id',
                initialValue: null,
                placeholder: 'Click To Search Select',
                requester: (searchName: string) => {
                    // return useAxios().get('/default/xxx', { params: { searchName } })
                    return fetchOptions()
                },
                handler: (response: any) => response?.items || [],
                onChoose: (item: any) => dataset.value.additionalValue = item.name
            }
        }
    ]"
    v-model="dataset">
</formkit>

通常对于数据进行远程加载的选择器对于默认数据处理通常难以控制，因为通常后端处理数据查询需要接受item.name但数据绑定通常为item.id，为此我们引入一个新的参数(initialValue)来进行控制, 当initialValue参数不为空时，我们会在组件完成加载后立即将initialValue作为形参调取您提供的requester

Usually selectors that load data remotely are difficult to control the default data handling, because usually the backend handles the data query by accepting item.name but the data binding is usually item.id, for this reason we introduce a new parameter (initialValue) for this purpose, when initialValue is not empty, we will call the requester you provide as a form parameter as soon as the component is finished loading. When the initialValue parameter is not null, we will use initialValue as a formal parameter to fetch your requester as soon as the component finishes loading.

rate

评分组件

<formkit
    :config="[
        {
            type: 'rate',
            label: '评分(Rate)',
            key: 'rate',
            props: { 'allow-half': false, colors: ['#F7BA2A', '#F7BA2A', '#F7BA2A'], size: 'large' }
        }
    ]"
    v-model="dataset">
</formkit>

提示

原生ELinput API请写入props内

config.props

props字段为自定义项，注意改字段接受一个Object类型的数据同时它会以v-bind的形式被绑定到所有模块。

The props field is a custom property. Note that this field accepts an Object-type data and will be bound to all modules in the form of v-bind.

类型	可选值	默认
Object	见下描述	{}

如果你需要修改原生element-plus表单组价属性可以将其直接写入props内，例如：

希望修改element-plus input attributes中的clear-icon、placeholder、 maxlength,你可以这样：

If you need to modify the native element-plus form group attributes, you can directly write them into the props section. For example:

To modify the clear-icon, placeholder, and maxlength attributes in element-plus input attributes, you can do it like this:

<formkit
    :config="[
        {
            type: 'input',
            label: '姓名 (Name)',
            key: 'password',
            props: { placeholder: '请输入姓名', clearable: true, maxlength: 10 }
        }
    ]"
    v-model="dataset">
</formkit>

value-key

类型	默认
String	id

作为 value 唯一标识的键名，当config.options为数组类型时或config.requester返回数组类型时你可能需要指定

output:

<formkit
    :config="[
        {
            type: 'select',
            label: 'Selector Student',
            key: 'studentid',
            props: { placeholder: 'Pls select', clearable: true, valueKey: 'studentid' },
            options: [
                { name: 'Student one', studentid: 1 },
                { name: 'Student two', studentid: 2 },
                { name: 'Student three', studentid: 3 }
            ]
        }
    ]"
    v-model="dataset">
</formkit>

output: {{ dataset.studentid }}

label-key

类型	默认
String	name

指定选项的数据源中节点标签为节点对象的某个属性值，当config.options为数组类型时或config.requester返回数组类型时你可能需要指定

<formkit
    :config="[
        {
            type: 'select',
            label: 'Selector Student',
            key: 'studentname',
            props: { placeholder: 'Pls select', clearable: true, labelKey: 'studentname' },
            options: [
                { studentname: 'Student one', id: 1 },
                { studentname: 'Student two', id: 2 },
                { studentname: 'Student three', id: 3 }
            ]
        }
    ]"
    v-model="dataset">
</formkit>