Expose

<formkit
    ref="FormKitRef"
    :config="[
        { type: 'input', label: '姓名', rules: [{ required: true, message: '姓名不能为空' }], key: 'title' },
        { type: 'input', label: '用户名', rules: [{ required: true, message: '用户名不能为空' }], key: 'userName' },
        { type: 'input', label: '密码', rules: [{ required: true, message: '密码不能为空' }], key: 'password' },
        { type: 'inputNumber', label: '输入数字', key: 'ratio' },
    ]"
    v-model="dataset"
    size="large"
    :columns="2"
/>

<br />

<el-button color="#626aef" @click="validate" :loading="validateCompleted">立即校验</el-button>

<el-button @click="clearValidate">清除校验</el-button>

<el-button color="#636363" @click="resetFields">resetFields</el-button>

<br />
<br />

<el-button color="#343434" @click="getfields">获取fields</el-button>

<el-button color="#999999" @click="scrollToField('title')">滚动到姓名</el-button>

<el-button color="#555" @click="validateField('title')">校验姓名</el-button>

script

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

const dataset = ref({}), validateCompleted = ref(false);

const FormKitRef = ref<Instance>()

async function validate() {
    try {
        validateCompleted.value = true;
        await FormKitRef.value.validate(true);
    } finally {
        validateCompleted.value = false;
    }
}

function clearValidate() {
    FormKitRef.value.clearValidate();
}

function resetFields() {
    FormKitRef.value.resetFields();
}

function getfields() {
    console.log(FormKitRef.value.fields);
}

function scrollToField(key: string) {
    FormKitRef.value.scrollToField(key);
}

function validateField(key: string) {
    FormKitRef.value.validateField(key);
}
</script>

注意

Element-plus-formkit提供自身实例的ts类型Instance。

import { type Instance } from 'element-plus-formkit';

buckets

获取所有所有requester属性远程返回结果数据项。

返回值: Array<{ key: string, value: any }>