antd-form-flexible

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

安装组件

npm i antd-form-flexible

使用表单组件

import antd-form-flexible from "antd-form-flexible"

示例demo

<script setup lang="ts">
const formList = [ {
        title: "姓名",
        dataIndex: "name",
        validateForm: {
            isRequire: true,
        },
    },{
        title: "年龄",
        dataIndex: "age",
        inputType: "inputNumber",
    },{
        title: "性别",
        dataIndex: "gender",
        inputType: "select",
        selectList: [{
          text: "男",
          value: 1
        },{
          text: "女",
          value: 2
        }],
       wrapperCol: {span: 12}
    },]
const baseInfo = ref<Record<any, any>>({})
const baseInfoForm = ref()
const submit = () => {
   baseInfoForm.value.validateForm(bool => {
      if (bool) {
         //表单通过验证
         console.log(baseInfo.value) // {name: 'hongfan', age: 26, gender: 2}
      }
})
}
const selectForm = (val: any, dataIndex: string) => {
    console.log(val, dataIndex)
   if (dataIndex === 'name') ｛
     console.log(`姓名被修改了${val}` )
   ｝
}
</script>
<template>
    <antd-form-flexible
                            :formList="formList"
                            labelLayout="vertical"
                            ref="baseInfoForm"
                            :form-bind="baseInfo"
                            @selectForm="selectForm" />
  <button @click="submit">提交</button>
<template/>

表单属性

 // 渲染的表单列表 枚举类型见FormListType
  formList: {
    type: Array as PropType<FormListArrayType>,
    default: () => ([]),
    required: true
  },
  // 表单绑定的对象 isBindItem为false时必填
  formBind: {
    type: Object,
    default: () => ({}),
  },
  // label宽度
  labelWidth: {
    type: Number,
  },
  // 元素所占百分比 按照24的比例设置 可以带小数点调节
  wrapperCol: {
    type: Object as PropType<WrapperColType>,
  },
  // 表单的展示方式 1.input 表单填写 2.span 文字展示
  wholeType: {
    type: String as PropType<FormWholeType>,
    default: "input",
  },
  // 表单单个元素自定义style
  itemStyle: {
    type: Object,
  },
  // 表单元素排列方式
  layout: {
    type: String as PropType<LayoutType>,
    default: "inline",
  },
  // 单个元素 label与表单的排列方式 1.inline 横向 2.vertical 垂直
  labelLayout: {
    type: String as PropType<LayoutType>,
    default: "inline",
  },
  // 表单自定义style
  formStyles: {
    type: Object,
  },
  // 是否开启表单字段绑定在当前formList每一项的value中
  isBindItem: {
    type: Boolean,
    default: false,
  },