elementUI使用总结（下篇）_element export default-CSDN博客

本文链接：https://blog.csdn.net/zh1775825464/article/details/108046494

本文详细介绍了Element UI中的Form表单组件，包括创建组件、内联表单的实现、表单验证及其自定义规则。同时，讨论了消息提示功能，如警告提示的创建和Message消息提示的使用，特别指出Message组件是一个JS插件，可在需要的地方直接调用其方法。此外，还概述了表格组件的各种属性、事件和自定义表头的配置。

摘要由CSDN通过智能技术生成

7.8Form表单组件

1.创建组件

<el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
       ......//表示可以创建多个<el-form-item></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

<script>
    export default {
        name: "Forms",
      data() {
        return {
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          }
        }
      },
      methods: {
        onSubmit() {
          console.log('submit!');
        }
      }
    }
</script>

2.内联表单(行内表单)

<el-form ref="form" :inline="true" :model="form" label-width="80px">
</el-form>

*通过设置 :inline=“true”*方式将表单作为内联表单处理

3.表单验证

使用说明：

1.Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator

<el-form :rules="rules">
     <el-form-item label="活动名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
    ......
</el-form>

<script>
    export default {
        name: "Forms",
      data() {
        return {
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          rules: {
            name: [
              {required: true, message: '请输入活动名称', trigger: 'blur'},
              {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
            ]
          }
        };
      },
      methods: {
        onSubmit() {
          console.log('submit!');
        }
      }
    }
</script>

2.表单提交调用表单组件的验证方法验证

<el-form :rules="rules" ref="form">
     <el-form-item label="活动名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
    ......
    <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
</el-form>

<script>
    export default {
        name: "Forms",
      data() {
        return {
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          rules: {
            name: [
              {required: true, message: '请输入活动名称', trigger: 'blur'},
              {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
            ]
          }
        };
      },
      methods: {
        onSubmit(