VForm组件

使用

<template>
  <VForm ref="formRef" v-model:model="form" :rules="rules" :schema="schema" :col-span="1"></VForm>
</template>

<script setup lang="ts">
import VForm from "@/components/VForm/VForm.vue";
  
const schema = [
  { label: "分类名称", prop: "name", type: "el-input" },
  { label: "排序", prop: "sort", type: "el-input" },
  { label: "状态", prop: "status", type: "el-switch" }
];
</script>

定义el-select、el-radio-group等组件的选项列表

<template>
  <VForm ref="formRef" v-model:model="form" :rules="rules" :schema="schema" :col-span="1"></VForm>
</template>

<script setup lang="ts">
import VForm from "@/components/VForm/VForm.vue";
import { ElMessage } from "element-plus";

const loadOptions = async () => {
  const res = await pageFnCategorys({ params: { pageIndex: 1, pageSize: 999 } });
  if (res.result) {
    return res.data?.list?.map(item => ({ label: item.name, value: item.id })) || [];
  } else {
    ElMessage.error("获取分类失败。" + res.message);
  }
};
const schema = [
  {
    label: "分类名称",
    prop: "categoryId",
    type: "el-select",
    apiProps: {
      api: loadOptions,
      apiParams: {}
    }
  },
  {
    label: '资源类型',
    prop: 'sourceType',
    type: 'el-radio-group',
    options: [
      { label: '账户', value: 'account' },
      { label: '分类', value: 'category' },
      { label: '商户', value: 'store' },
    ],
  }
];
</script>

定义组件的私有props

const schema = [
  { label: '仓库编号', prop: 'warehouseNo', type: 'el-input', props: { placeholder: '请输入仓库编号 ck+两位数字' } },
  { label: '账户余额', prop: 'balance', type: 'el-input-number', props: { precision: 2 } },
];

TypeScript类型定义

type = 'el-input'|'el-input-number'|'text'|'el-select'|'el-radio-group'|'el-switch'