Form

Form

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

说明

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

Form新增属性

• 属性说明：

FormItem新增属性

• 属性说明：

• 代码示例：

  // 在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。