表单操作按钮

提交按钮

效果预览可直接操作下方示例

submit 是校验通过后的事件，参数为 (form, done)。输入用户名并提交，结果区显示本地保存内容；实际业务在请求成功或失败后通过 finally 调用 done() 结束提交状态。

正在加载示例…

<template>
  <avue-form :option="option" v-model="form" @submit="handleSubmit" @error="handleError" />
  <pre>{{ JSON.stringify(result, null, 2) }}</pre>
</template>

<script setup>
import { ref } from 'vue';
const form = ref({ username: '' });
const result = ref(null);
const option = {
  column: [{ label: '用户名', prop: 'username', span: 24,
    rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }] }],
};
async function handleSubmit(values, done) {
  try {
    // Replace this local operation with your request function.
    const saved = await Promise.resolve({ ...values });
    result.value = { success: true, saved };
  } catch (error) {
    result.value = { success: false, message: String(error) };
  } finally {
    done();
  }
}
function handleError(errors) {
  result.value = { success: false, invalidFields: Object.keys(errors) };
}
</script>

清空按钮

效果预览可直接操作下方示例

reset-change方法为表单清空按钮回调

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"
             @reset-change="handleReset"></avue-form>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({});
const option = ref({
  column: [{
    label: "用户名",
    prop: "username"
  }]
});

const handleReset = () => {
  ElMessage.success('清空成功回调');
};
</script>

隐藏按钮

效果预览可直接操作下方示例

利用submitBtn和emptyBtn属性去隐藏按钮

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  submitBtn: false,
  emptyBtn: false,
  column: [
    {
      label: "用户名",
      prop: "username"
    }
  ]
});
</script>

按钮文案

效果预览可直接操作下方示例

利用 submitText 和 emptyText 设置按钮文案

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script setup>
import { ref } from 'vue';
const form = ref({});
const optipn = ref({
  submitText: '完成',
  emptyText: '取消',
  column: [{
    label: "用户名",
    prop: "username"
  }]
})
</script>

行内按钮

效果预览可直接操作下方示例

利用列的span属性和menuSpan属性达到行内表单

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  menuSpan: 6,
  column: [
    {
      label: '姓名',
      prop: 'name',
      span: 6
    },
    {
      label: '年龄',
      prop: 'sex',
      span: 6
    }
  ]
});
</script>

按钮位置

效果预览可直接操作下方示例

利用menuPosition属性设置按钮的位置

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  menuPosition: 'left',
  column: [{
    label: "用户名",
    prop: "username"
  }]
});
</script>

自定义按钮

效果预览可直接操作下方示例

利用menu-form卡槽去自定义按钮

正在加载示例…

<template>
  <avue-form ref="formRef"
             :option="option"
             v-model="form"
             @submit="handleSubmit">
    <template #menu-form-before="{ size }">
      <el-tag type="primary"
              :size="size">提示</el-tag>
    </template>
    <template #menu-form="{ size }">
      <el-button type="primary"
                 :size="size"
                 @click="submitForm">自定义提交</el-button>
      <el-button :size="size"
                 @click="resetForm">自定义清空</el-button>
    </template>
  </avue-form>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({});
const formRef = ref(null)
const option = ref({
  submitBtn: false,
  emptyBtn: false,
  column: [{
    label: "用户名",
    prop: "username"
  }]
});

const submitForm = () => {
  formRef.value.submit();
};

const resetForm = () => {
  formRef.value.resetForm();
};

const handleSubmit = (form, done) => {
  ElMessage.success('3s后关闭');
  setTimeout(() => {
    done();
  }, 3000);
};
</script>

打印按钮

你可以可以调用全局$Print打印方法

效果预览可直接操作下方示例

配置printBtn打开表单打印功能

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"
             @submit="handleSubmit"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  printBtn: true,
  column: [{
    label: "用户名",
    prop: "username"
  }]
});

const handleSubmit = () => {
  // Your submit logic here
};
</script>

模拟数据按钮

一键生成模拟数据方便测试

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>

效果预览可直接操作下方示例

mockBtn 设置 true，在列中配置对应的规则即可，当然你可以自己写模拟逻辑，在mock写方法，会返回当前表单的数据,最后return即可，详情参考如下例子

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>

<script setup>
import { ref } from 'vue'

const DIC = {
  VAILD: [
    { label: '真', value: 'true' },
    { label: '假', value: 'false' }
  ],
  SEX: [
    { label: '男', value: 0 },
    { label: '女', value: 1 }
  ]
}

const form = ref({
  text: '动态内容1'
})

const option = {
  mockBtn: true,
  column: [
    {
      label: '头像',
      prop: 'video',
      type: 'upload',
      listType: 'picture-img',
      mock: { type: 'image' },
      span: 24
    },
    {
      label: 'id',
      prop: 'id',
      mock: { type: 'id', uuid: true }
    },
    {
      label: '手机号',
      prop: 'tel',
      mock: { type: 'tel' }
    },
    {
      label: '用户名',
      prop: 'username',
      mock: { type: 'name', en: true }
    },
    {
      label: '自定义',
      prop: 'text2',
      mock: (form) => '自定义逻辑' + form.name,
      span: 8
    },
    {
      label: '姓名',
      prop: 'name',
      mock: { type: 'name' },
      span: 8
    },
    {
      label: '类型',
      prop: 'type',
      type: 'select',
      dicData: DIC.VAILD,
      span: 6,
      mock: { type: 'dic' }
    },
    {
      label: '权限',
      prop: 'grade',
      span: 6,
      type: 'checkbox',
      dicData: DIC.VAILD,
      mock: { type: 'dic' }
    },
    {
      label: '开关',
      prop: 'switch',
      span: 6,
      type: 'switch',
      dicData: DIC.SEX,
      mock: { type: 'dic' },
      hide: true,
      row: true
    },
    {
      label: '性别',
      prop: 'sex',
      span: 6,
      type: 'radio',
      dicData: DIC.SEX,
      mock: { type: 'dic' }
    },
    {
      label: '数字',
      prop: 'number',
      type: 'number',
      span: 6,
      precision: 2,
      mock: { type: 'number', max: 1, min: 2, precision: 2 },
      min: 0,
      max: 3,
      row: true
    },
    {
      label: '网站',
      span: 12,
      prop: 'url',
      prepend: 'http://',
      mock: { type: 'url', header: false },
      append: 'com',
      row: true
    },
    {
      label: '日期',
      prop: 'date',
      type: 'date',
      span: 8,
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      mock: { type: 'datetime', format: 'yyyy-MM-dd' }
    },
    {
      label: '日期时间',
      prop: 'datetime',
      type: 'datetime',
      span: 8,
      format: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      mock: { type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss', now: true }
    },
    {
      label: '时间',
      prop: 'time',
      type: 'time',
      span: 8,
      format: 'HH:mm:ss',
      valueFormat: 'HH:mm:ss',
      mock: { type: 'datetime', format: 'HH:mm:ss' }
    },
    {
      label: '地址',
      span: 24,
      prop: 'address',
      mock: { type: 'county' }
    },
    {
      label: '建议',
      span: 24,
      prop: 'adit',
      mock: { type: 'word', min: 10, max: 30 }
    }
  ]
}
</script>