表单自定义

自定义内容

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

正在加载示例…

<template>
  <avue-form v-model="form"
             :option="option">
    <template #text="{ disabled, size }">
      <div>
        <el-tag>{{ form.text ? form.text : '暂时没有内容' }}</el-tag>
        <el-input :disabled="disabled"
                  :size="size"
                  v-model="form.text"
                  placeholder="这里是自定的表单">
        </el-input>
      </div>
    </template>
  </avue-form>
</template>

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

const form = ref({
  text: ''
});

const option = {
  labelWidth: 120,
  column: [{
    label: '姓名',
    prop: 'text',
    rules: [{
      required: true,
      message: "请输入姓名",
      trigger: "blur"
    }]
  }]
};
</script>

自定义标题

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

正在加载示例…

<template>
  <avue-form v-model="form"
             :option="option">
    <template #text-label="{}">
      <el-tooltip class="item"
                  effect="dark"
                  content="文字提示"
                  placement="top-start">
        <span>姓名</span>
      </el-tooltip>
    </template>
  </avue-form>
</template>

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

const form = ref({
  text: ''
});

const option = {
  labelWidth: 120,
  column: [{
    label: '姓名',
    prop: 'text',
    rules: [{
      required: true,
      message: "请输入姓名",
      trigger: "blur"
    }]
  }]
};
</script>

自定义错误提示

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

正在加载示例…

<template>
  <avue-form v-model="form"
             :option="option">
    <template #text-error="{ error }">
      <p style="color:green">自定义提示{{ error }}</p>
    </template>
  </avue-form>
</template>

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

const form = ref({
  text: ''
});

const option = {
  labelWidth: 120,
  column: [{
    label: '姓名',
    prop: 'text',
    rules: [{
      required: true,
      message: "请输入姓名",
      trigger: "blur"
    }]
  }]
};
</script>

提示

3.6.4+

自定义描述信息

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

在卡槽中指定列的prop加上-desc作为卡槽的名称开启自定义描述信息

正在加载示例…

<template>
  <avue-form v-model="form"
             :option="option">
    <template #text-desc>
      <p style="color:blue">这是姓名字段的自定义描述信息</p>
    </template>
  </avue-form>
</template>

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

// 表单数据
const form = ref({
  text: ''
});

// 表单配置选项
const option = {
  labelWidth: 120,
  column: [{
    label: '姓名',
    prop: 'text',
    rules: [{
      required: true,
      message: "请输入姓名",
      trigger: "blur"
    }]
  }]
};
</script>

自定义按钮

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

正在加载示例…

<template>
  <avue-form ref="formRef"
             v-model="form"
             :option="option">
    <template #menu-form="{}">
      <el-button icon="el-icon-user"
                 type="primary"
                 @click="handleSubmit">提 交</el-button>
      <el-button icon="el-icon-delete"
                 @click="handleEmpty">清 空</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({
  emptyBtn: false,
  submitBtn: false,
  column: [
    {
      label: '用户名',
      prop: 'username',
      rules: [
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }
      ]
    }
  ]
});

const handleEmpty = () => {
  form.value = {};
};

const handleSubmit = () => {
  formRef.value.validate((valid, done, msg) => {
    if (valid) {
      ElMessage.success(JSON.stringify(form.value));
      setTimeout(() => {
        done();
      }, 2000);
    }
  });
};
</script>

自定义样式

.formClassName{
  background-color: #409eff;
  .el-form-item__label{
    color:#fff;
  }
}

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

className属性配置上样式的名字即可

正在加载示例…

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

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

const form = ref({});
const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '性别',
      prop: 'sex',
      span: 24,
      className: 'formClassName'
    }
  ]
});
</script>

render渲染

提示

3.4.2+

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

正在加载示例…

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

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

const form = ref({});

const option = {
  column: [{
    label: '姓名',
    prop: 'text',
    render: (params) => {
      return h('p',
        {
          id: 'box',
          class: { 'demo': true },
          style: { color: 'pink', lineHeight: '30px' },
        }, 'Hello World Avue');
    }
  }]
};
</script>

引入三方组件

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

正在加载示例…

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

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

const form = ref({});
const option = ref({
  column: [
    {
      label: '文本1',
      prop: 'text1'
    },
    {
      label: '',
      labelWidth: 40,
      prop: 'divider',
      component: 'elDivider',
      span: 24,
      event: {
        click: () => {
          ElMessage.success('点击方法');
        }
      },
      params: {
        html: '<h2 style="color:red">自定义html标签,点我触发方法</h2>',
        contentPosition: 'left'
      }
    },
    {
      label: '文本2',
      prop: 'text2'
    },
    {
      label: '',
      labelWidth: 40,
      prop: 'calendar',
      component: 'elCalendar',
      span: 24,
      params: {}
    }
  ]
});
</script>