表单 Form

基础示例

<template>
  <dc-form
    v-model="state.form"
    :schema="schema"
    v-bind="componentProps"
    @submit="onSubmit"
  />
</template>
<script lang="ts" setup>
import { reactive } from "vue";
const state = reactive({
  form: {} as any,
});
// custom form schema
const schema = [
  {
    label: "输入框",
    prop: "user",
  },
  {
    label: "密码",
    prop: "password",
    componentProps: {
      type: "password",
    },
  },
  {
    label: "数字",
    prop: "number",
    componentProps: {
      type: "number",
    },
  },
  {
    label: "图片上传",
    prop: "upload",
    type: "upload",
    componentProps: {
      action: "locahost:8000/upload",
    },
  },
  {
    label: "下拉列表",
    prop: "sex",
    type: "select",
    componentProps: {
      options: [
        {
          label: "男",
          value: "man",
        },
        {
          label: "女",
          value: "woman",
        },
      ],
    },
  },
  {
    label: "文本框",
    prop: "description",
    componentProps: {
      type: "textarea",
    },
  },
];

// ElForm props
const componentProps = {
  labelWidth: 100,
  statusIcon: true,
  inline: false,
};
function onSubmit(form: any) {
  console.log(form);
  // your submit options here
}
</script>

useForm Hook

<template>
  <dc-form @register="registerForm" @submit="onSubmit" />
</template>
<script lang="ts" setup>
import { useForm } from "dcv-next";
// custom form schema
const schema = [
  {
    label: "输入框",
    prop: "user",
    rules: [
      {
        required: true,
        message: "请输入标题",
        trigger: "blur",
      },
    ],
  },
  {
    label: "密码",
    prop: "password",
    componentProps: {
      type: "password",
    },
    rules: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
  {
    label: "数字",
    prop: "number",
    componentProps: {
      type: "number",
    },
    rules: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
  {
    label: "下拉列表",
    prop: "sex",
    type: "select",
    componentProps: {
      options: [
        {
          label: "男",
          value: "man",
        },
        {
          label: "女",
          value: "woman",
        },
      ],
    },
    rules: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
  {
    label: "文本框",
    prop: "description",
    componentProps: {
      type: "textarea",
    },
    rules: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
];

const [registerForm] = useForm({
  schema: schema,
  componentProps: {
    labelWidth: 100,
    statusIcon: true,
    inline: false,
  },
});

function onSubmit(form: any) {
  console.log(form);
  // your submit options here
}
</script>

自定义

自定义表单字段可使用 model 获取当前表单数据， item 可返回当前表单项配置

<template #slot="{ model, item }">
  <ElInput v-model="model.slot"></ElInput>
</template>

<template>
  <dc-form @register="registerForm" @submit="onSubmit">
    <template #slot="{ model }">
      <p>this is slot</p>
      <ElInput v-model="model.slot" />
    </template>
  </dc-form>
</template>
<script lang="ts" setup>
import { useForm } from "dcv-next";
// custom form schema
const schema = [
  {
    label: "自定义",
    prop: "slot",
  },
];

const [registerForm] = useForm({
  schema: schema,
  componentProps: {
    labelWidth: 100,
    statusIcon: true,
    inline: false,
  },
});

function onSubmit(form: any) {
  console.log(form);
  // your submit options here
}
</script>

表单校验

<template>
  <dc-form @register="registerForm" @submit="onSubmit" />
</template>
<script lang="ts" setup>
import { useForm } from "dcv-next";
// custom form schema
const schema = [
  {
    label: "输入框",
    prop: "user",
    rules: [
      {
        required: true,
        message: "请输入标题",
        trigger: "blur",
      },
    ],
  },
  {
    label: "密码",
    prop: "password",
    componentProps: {
      type: "password",
    },
    rules: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
  {
    label: "数字",
    prop: "number",
    componentProps: {
      type: "number",
    },
    rules: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
  {
    label: "下拉列表",
    prop: "sex",
    type: "select",
    componentProps: {
      options: [
        {
          label: "男",
          value: "man",
        },
        {
          label: "女",
          value: "woman",
        },
      ],
    },
    rules: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
  {
    label: "文本框",
    prop: "description",
    componentProps: {
      type: "textarea",
    },
    rules: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
];

const [registerForm] = useForm({
  schema: schema,
  componentProps: {
    labelWidth: 100,
    statusIcon: true,
    inline: false,
  },
});

function onSubmit(form: any) {
  console.log(form);
  // your submit options here
}
</script>

图片上传

<template>
  <dc-form @register="registerForm" @submit="onSubmit" />
</template>
<script lang="ts" setup>
import { useForm } from "dcv-next";
// custom form schema
const schema = [
  {
    label: "图片上传",
    prop: "upload",
    type: "upload",
    componentProps: {
      action: "#",
    },
  },
];

const [registerForm] = useForm({
  schema: schema,
  componentProps: {
    labelWidth: 100,
    statusIcon: true,
    inline: false,
  },
});

function onSubmit(form: any) {
  console.log(form);
  // your submit options here
}
</script>

API

表单属性 Form Props

属性名称	类型	描述
modelValue	Object	表单数据
schema	Array	表单项配置
componentProps	Object	表单组件属性

表单项属性 FormItem Props

属性名称	类型	描述
label	String	标签
prop	String	属性值
rules	Array	表单校验规则
componentProps	Object	表单项组件属性

上传组件属性 Upload Props

属性名称	类型	描述
action	String	上传请求地址

自定义属性 Slot Props

属性名称	类型	描述
model	object	当前表单数据
item	object	当前表单配置