Skip to content

xxq143/o-form

Repository files navigation

vue3 element-plus typescript

开发阶段,切勿使用

Do not use during development stage

说明:该组件目前仅提供简单的表单配置,旨在帮助个人项目的初始数据录入(或许有帮助),否则,请务在重要的项目中使用

基本用法:

  • 确保项目是 vue3 框架并安装和注册了 element-plus
  • 在 main.js 中引入组件及样式
import oForm from "o-form";
import "o-form/dist/index.csss";

const app = createApp(App);
app.use(oForm);
  • 组件内使用
<template>
    <o-form ref="formRef" v-model:data="state.form" :config="state.config"></o-form>
    <el-button @click="submit">submit</el-button>
</template>

<script>
    import {ref, reactive} from 'vue'

    const formRef = ref(HTMLElement)
    const state = reactive({
        data: {},
        config: [{
            label: '',
            children:[{
                oType: 'input',
                key: 'test',
                prop: 'test',
                span: 6,
                label: 'testLabel',
                rules: {required: true, message: '请输入', trigger: 'blur'}
            }]
        }]
    })

    function submit() {
        // 提交方法 Promise
        formRef.value.submit().then(data => {
            // 校验成功 data 表单数据
        }).catch(err => {
            // 校验失败 err 失败项集合
        })
    }
</script>
  • 后续会添加生成表单的网站地址

About

vue3 element-plus form

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages