Vue ElementUI Form 动态添加项目和必填规则

2022-12-25 22:03:34

在Vue ElementUI Form中动态添加el-form-item并设置rules必填项校验

动态添加el-form-item

在Vue ElementUI Form组件中，可以通过动态渲染的方式添加el-form-item。首先，在Vue组件中定义一个数组来存储el-form-item的数据。然后，使用v-for指令根据需求动态渲染el-form-item。

设置rules必填项校验

在动态添加的el-form-item中，可以使用rules属性设置必填项校验规则。首先，在Vue组件中定义一个函数生成rules对象。然后，在需要设置必填项校验的el-form-item中，使用rules属性引用该函数。

实例演示

<template>
  <el-form :model="form" ref="form">
    <el-form-item v-for="item in formItems" :key="item.prop">
      <el-input v-model="item.value" :placeholder="item.label" :rules="generateRules()"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      formItems: [
        { prop: 'name', label: '姓名', value: '' },
        { prop: 'age', label: '年龄', value: '' },
        { prop: 'address', label: '地址', value: '' },
      ],
    };
  },
  methods: {
    generateRules() {
      return [
        { required: true, message: '此项为必填项', trigger: 'blur' },
      ];
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单数据校验成功，可以提交表单
        } else {
          // 表单数据校验失败，给出错误提示
        }
      });
    },
  },
};
</script>