VTJ.PRO

Appearance

XForm 表单 ​

示例 ​

基础用法 ​

字段名称
字段名称
label1
label2
label3
label4

<template>
  <div>
    <XForm
      ref="form"
      size="default"
      label-width="80px"
      :inline="inline"
      :model="model"
      @submit="onSubmit"
      @change="onModelChange"
      @reset="onReset">
      <XField ref="fieldRef" label="字段名称" v-model="model.fieldValue1">
      </XField>
      <XField
        label="字段名称"
        editor="textarea"
        v-model="model.fieldValue2"
        placeholder="多行文本">
      </XField>
    </XForm>

    <XForm
      ref="form"
      size="large"
      label-width="80px"
      :inline="!inline"
      :inline-columns="2"
      :model="model"
      :submitMethod="onSubmitMethod"
      :tooltipMessage="true"
      @submit="onSubmit"
      @change="onModelChange"
      @reset="onReset">
      <XField ref="fieldRef" label="label1" v-model="model.fieldValue2">
      </XField>
      <XField ref="fieldRef" label="label2" v-model="model.fieldValue3">
      </XField>
      <XField ref="fieldRef" label="label3" v-model="model.fieldValue4">
      </XField>
      <XField ref="fieldRef" label="label4" v-model="model.fieldValue5">
      </XField>
    </XForm>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { XForm, XField } from '@vtj/ui';

  const inline = ref(false);

  const model = reactive({
    fieldValue1: '',
    fieldValue2: '',
    fieldValue3: '',
    fieldValue4: '',
    fieldValue5: ''
  });

  const onSubmit = (model: object) => {
    console.log('onSubmit', model);
  };

  const onModelChange = (model: object) => {
    console.log('onModelChange', model);
  };

  const onReset = () => {
    console.log('onReset');
  };

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

<style scoped></style>

详细用法-添加/删除表单项 ​

分类
公共
选项一
级联
请输入级联
项目1

<template>
  <XForm
    ref="form"
    size="default"
    label-width="80px"
    :inline="inline"
    :inline-columns="2"
    :model="model"
    @submit="onSubmit"
    @change="onModelChange">
    <XField
      name="type"
      label="分类"
      editor="radio"
      :props="{ button: true }"
      :options="options"></XField>
    <XField name="common" label="公共" readonly></XField>
    <XField name="type1" label="选项一" :visible="type1Visible"></XField>
    <XField name="type2" label="选项二" :visible="type2Visible"></XField>
    <XField name="type3" label="选项三" :visible="{ type: 3 }"></XField>
    <XField
      name="type4"
      editor="select"
      label="级联"
      :cascader="['type']"
      :options="optionsLoader">
    </XField>

    <XField
      v-for="(_item, index) of model.items"
      :name="`items.${index}.title`"
      :label="`项目${index + 1}`">
      <ElButton style="margin-left: 10px" @click="onDelItem(index)">
        删除
      </ElButton>
    </XField>

    <template #action>
      <ElButton @click="onAddItem" type="danger">插槽增加</ElButton>
    </template>
  </XForm>
</template>
<script lang="ts" setup>
  import { ElButton } from 'element-plus';
  import { reactive, ref } from 'vue';
  import { XField, XForm } from '@vtj/ui';

  const form = ref();
  const inline = ref(true);

  const options = [
    {
      label: '选项一',
      value: 1
    },
    {
      label: '选项二',
      value: 2
    },
    {
      label: '选项三',
      value: 3
    }
  ];

  const model = reactive({
    type: 1,
    common: 'ABC',
    items: [
      {
        title: 'ABC'
      }
    ],
    ck: `<p>tests</p>`
  });

  const onSubmit = (m: any) => {
    console.log('submit model', m);
    // form.value.reset();
  };

  const type1Visible = (m: any) => {
    return m.type === 1;
  };

  const type2Visible = (m: any) => {
    return m.type === 2;
  };

  const optionsLoader = (m: any) => {
    const val = m?.type;
    const result: any[] = [];
    for (let i = 0; i < 5; i++) {
      result.push({
        label: `类型_${val}_${i}`,
        value: `${val}_${i}`
      });
    }
    return result;
  };

  const onModelChange = (m: any) => {
    console.log('onModelChange', m);
  };

  const onAddItem = () => {
    model.items.push({
      title: ''
    });
  };

  const onDelItem = (index: number) => {
    model.items.splice(index, 1);
  };
</script>

<style scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
</style>

表单校验 ​

ActivityName
ActivityZone
ActivityCount
时间

<template>
  <div>
    <XForm
      ref="form"
      label-width="160px"
      :rules="rules"
      :model="model"
      required
      @submit="onSubmit">
      <XField
        name="name"
        label="ActivityName"
        editor="text"
        v-model="model.name"
        error="错误信息"
        :inline-message="true"
        :show-message="true"
        :tooltipMessage="true"
        tooltip-position="outer">
      </XField>

      <XField
        name="region"
        label="ActivityZone"
        editor="text"
        v-model="model.region"
        error="错误信息"
        :inline-message="true"
        :show-message="true"
        :tooltipMessage="true"
        tooltip-position="inner">
      </XField>

      <XField
        name="count"
        label="ActivityCount"
        editor="text"
        v-model="model.count"
        error="错误信息"
        :inline-message="true"
        :show-message="true"
        :tooltipMessage="false"
        tooltip-position="inner">
      </XField>

      <XField
        name="date"
        label="时间"
        editor="time"
        :inline-message="true"
        :show-message="true"
        :tooltipMessage="false"
        tooltip-position="inner">
      </XField>
    </XForm>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { XForm, XField } from '@vtj/ui';

  const model = ref({
    name: ''
  });

  const rules = reactive({
    name: [
      {
        required: true,
        message: 'Please input Activity name',
        trigger: 'blur'
      },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
    ],
    region: [
      {
        required: true,
        message: 'Please select Activity zone',
        trigger: ['blur', 'change']
      }
    ],
    count: [
      {
        required: true,
        message: 'Please select Activity count',
        trigger: ['blur', 'change']
      }
    ],
    date: [
      {
        required: true,
        message: 'Please select date',
        trigger: 'change'
      }
    ]
  });

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

<style scoped></style>

API ​

属性 ​

属性名说明类型默认值
model表单数据对象object{}
inline行内表单模式boolean-
inlineColumnsinline模式显示列数number-
footer显示底部操作按钮booleantrue
submitText提交按钮文本string-
resetText重置按钮文本string-
submitMethod表单提交处理方法function-
tooltipMessage是否在tooltip显示校验信息object | booleanundefined
size用于控制该表单内组件的尺寸string <large | default | small>default
接收 ElForm 的所有属性 ​

事件 ​

名称说明参数
change表单数据改变时触发modal
submit提交按钮点击触发model
reset重置按钮点击触发-

插槽 ​

名称说明参数
action底部按钮-

暴露 ​

名称说明类型
formRef--
model--
submit--
reset--
validate--

Released under the MIT License.

Copyright © 2024-present VTJ.PRO