VTJ.PRO

Appearance

XQueryForm 查询表单 ​

示例 ​

基础用法 ​

姓名
请输入姓名
年龄
自定义

<template>
  <div>
    <XQueryForm ref="formRef" size="default" :model="model" :items="items">
      <template #custom>
        <XField label="自定义"></XField>
      </template>
    </XQueryForm>
    <XAction @click="onClick" label="提交"></XAction>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { XQueryForm, XAction, XField, type QueryFormItems } from '@vtj/ui';

  const formRef = ref();

  const model = reactive({
    F1: 'abc'
  });

  const items: QueryFormItems = [
    {
      label: '姓名',
      name: 'name',
      required: true,
      editor: 'select',
      options: [
        {
          label: '选项一',
          value: 1
        }
      ]
    },
    {
      label: '年龄',
      name: 'age',
      required: true
    },
    'custom'
  ];

  const onClick = () => {
    formRef.value.submit();
  };
</script>

行内用法 ​

展开
姓名
请输入姓名
年龄
自定义
姓名
请输入姓名
年龄
自定义

<template>
  <div>
    <XQueryForm
      ref="formRef"
      size="default"
      :model="model"
      :items="items"
      :inlineColumns="1">
      <template #custom>
        <XField label="自定义"></XField>
      </template>
    </XQueryForm>

    <XQueryForm
      ref="formRef"
      size="default"
      :model="model"
      :items="items"
      :collapsible="false"
      :inline="true">
      <template #custom>
        <XField label="自定义"></XField>
      </template>
    </XQueryForm>

    <XQueryForm
      ref="formRef"
      size="default"
      :model="model"
      :items="items"
      :collapsible="false"
      :inline="false">
      <template #custom>
        <XField label="自定义"></XField>
      </template>
    </XQueryForm>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { XQueryForm, XField, type QueryFormItems } from '@vtj/ui';

  const formRef = ref();

  const model = reactive({
    F1: 'abc'
  });

  const items: QueryFormItems = [
    {
      label: '姓名',
      name: 'name',
      required: true,
      editor: 'select',
      options: [
        {
          label: '选项一',
          value: 1
        }
      ]
    },
    {
      label: '年龄',
      name: 'age',
      required: true
    },
    'custom'
  ];

  const onClick = () => {
    formRef.value.submit();
  };
</script>

表单验证 ​

展开

<template>
  <div>
    <XQueryForm
      ref="formRef"
      size="default"
      :model="model"
      :items="items"
      :inlineColumns="1"
      :rules="rules">
      <template #custom>
        <XField name="custom" required label="自定义"></XField>
      </template>
    </XQueryForm>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { XQueryForm, XField, type QueryFormItems } from '@vtj/ui';

  const formRef = ref();

  const model = reactive({
    F1: 'abc'
  });

  const items: QueryFormItems = [
    {
      label: '姓名',
      name: 'name',
      required: true,
      editor: 'select',
      options: [
        {
          label: '选项一',
          value: 1
        }
      ]
    },
    {
      label: '年龄',
      name: 'age'
    },
    'custom'
  ];

  const validateCustom = (rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('Please input the custom'));
    } else {
      callback();
    }
  };

  const rules = reactive({
    name: [
      {
        required: true,
        message: 'Please input  name',
        trigger: ['blur', 'change']
      }
    ],
    age: [
      {
        required: true,
        message: 'Please input  name',
        trigger: ['blur', 'change']
      }
    ],
    custom: [{ validator: validateCustom, trigger: 'blur' }]
  });
</script>

按钮 ​

展开

<template>
  <div>
    <XAction
      label="showFooter"
      type="primary"
      @click="showFooter = !showFooter">
    </XAction>

    <XQueryForm
      ref="formRef"
      size="default"
      :model="model"
      :items="items"
      :inlineColumns="1"
      :rules="rules"
      :submitMethod="onSubmitMethod"
      submitText="提交"
      resetText="重置">
      <template #custom>
        <XField name="custom" required label="自定义"></XField>
      </template>
    </XQueryForm>

    <XQueryForm
      ref="formRef"
      size="default"
      :model="model"
      :items="items"
      :inlineColumns="1"
      :rules="rules"
      :submitMethod="onSubmitMethod"
      :footer="showFooter"
      submitText="提交"
      resetText="重置">
      <template #custom>
        <XField name="custom" required label="自定义"></XField>
      </template>
    </XQueryForm>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { XQueryForm, XField, XAction, type QueryFormItems } from '@vtj/ui';

  const formRef = ref();

  const model = reactive({
    F1: 'abc'
  });

  const showFooter = ref(false);

  const items: QueryFormItems = [
    {
      label: '姓名',
      name: 'name',
      required: true,
      editor: 'select',
      options: [
        {
          label: '选项一',
          value: 1
        }
      ]
    },
    {
      label: '年龄',
      name: 'age'
    },
    'custom'
  ];

  const validateCustom = (rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('Please input the custom'));
    } else {
      callback();
    }
  };

  const rules = reactive({
    name: [
      {
        required: true,
        message: 'Please input  name',
        trigger: ['blur', 'change']
      }
    ],
    age: [
      {
        required: true,
        message: 'Please input  name',
        trigger: ['blur', 'change']
      }
    ],
    custom: [{ validator: validateCustom, trigger: 'blur' }]
  });

  const onSubmitMethod = (model: any) => {
    console.log('onSubmitMethod', model);
  };
</script>

API ​

属性 ​

属性名说明类型默认值
collapsible是否折叠面板booleantrue
items表单中的项array-
inlineColumnsinline模式显示列数number-
inline行内表单模式booleanfalse
model表单数据对象object-
footer显示底部按钮booleanfalse
submitText提交按钮文本string提交
resetText重置按钮文本string重置
submitMethod表单提交处理方法function-
tooltipMessage是否在tooltip显示校验信息booleanfalse
label标签string-
label-width标签宽度string | number-
required是否必填booleanfalse
rules校验规则object-
error错误信息string-
show-message是否显示校验错误信息booleantrue
inline-message是否以行内形式展示校验信息booleanfalse
size用于控制该表单内组件的尺寸stringdefault
接收 ElForm 的所有属性 ​

插槽 ​

插槽名说明类型
custom自定义内容-

暴露 ​

名称说明类型
validate校验方法
submit-
reset-
formRef-
$vtjDynamicSlots-

Released under the MIT License.

Copyright © 2024-present VTJ.PRO