Form

高性能表单控件,自带数据域管理。包含数据录入、校验以及对应样式。

说明

组件API详细内容请参考:https://www.antdv.com/components/form-cn

Form新增属性

  • 属性说明:
参数名 类型 必填 默认值 说明
item-style string, Object 空字符串 formItem样式
size string middle middle, small,表单item的上下间距
validate-type string error 验证方式error, tooltip(错误提示)

FormItem新增属性

  • 属性说明:
参数名 类型 必填 默认值 说明
validate-type String error 验证方式error, tooltip(错误提示)
  • 代码示例:
    // 在script标签中按需引入
    import { Form, Input } from '@jecloud/ui';
    export default {
      components: { Form, FormItem: Form.Item, Input },
      setup() {
          const formState = reactive({
          username: "",
      });
      return { formState };
    }
    };
    // 在vue的template标签中
    <Form
      :model="formState"
      name="basic"
      style="width: 500px"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      size="small"
    >
      <FormItem
          label="Username"
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
      >
          <Input v-model:value="formState.username" />
      </FormItem>
    </Form>
  • 事件脚本示例:

    const {  Form, Input } = JE.useUi();
    const { h, createVNode }= JE.useVue();
    const labelCol1 = { style: 'width:100px;' };
    const sqlVnodeArr = [{
      id: 'idField',
      text: '主键',
      placeholder: '填写SQL中对照(id)的字段',
      required: true,
      requiredText: '该输入项为必填项!',
    }];
    const formState = {
      "idField": "",
    };
    const Vnode = sqlVnodeArr.map((item)=>{
      return  h(Form.Item, {label: item.text,name: item.id,rules:[{ required: item.required, message: item.requiredText }]}, createVNode(Input,{placeholder:item.placeholder,             value: formState[item.id],
          'onUpdate:value': function (val) {
              formState[item.id] = val;
      }}))
    })
    return h(Form,{ size: 'small',autocomplete:"off",model: formState,labelCol: labelCol1},Vnode)
  • 注意:
    如果 Form和 FormItem都设validate-type属性 , FormItem优先级高于Form。

最后编辑: 秦永莲  文档更新时间: 2024-08-08 13:51   作者:秦永莲