简介

el-form 是一个用于处理表单的组件。

属性

data

data属性用于传递要显示的表格数据。

功能： data 属性用于接收要在表格中展示的数据源。
这个数据源是一个数组，数组的每个元素（该元素是一个对象）代表了表格中的一行数据。

数据结构： 通常，data 中的每个对象表示表格中的一行。
对象的属性对应着表格的列，即对象的 key 对应表格的列名，值则对应这一行中对应列的数据。

示例：

<el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
    prop="name"
    label="Name">
  </el-table-column>
  <el-table-column
    prop="age"
    label="Age">
  </el-table-column>
</el-table>

在这个示例中，:data="tableData" 将 tableData 作为数据源传递给了 el-table 组件。tableData 是一个数组，其中的每个对象代表表格中的一行，包含了 name 和 age 两个属性，分别对应表格的两列。

data 属性是 el-table 显示数据的关键，通过传递正确的数据源，表格会根据提供的数据渲染相应的行和列，呈现出表格的内容。

model

在 Element UI 中，model 用于建立 el-form 和 数据模型 之间的关联，实现表单数据的双向绑定。

当你在使用 el-form 时，你可以将一个数据对象作为表单的数据模型，然后通过 model 属性将该数据对象与表单进行绑定。这种绑定允许你轻松地获取表单中的数据或将数据直接与表单项关联。

举例来说：

<template>
  <el-form :model="formData" label-width="80px">
    <el-form-item label="姓名">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="formData.age"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: ''
        // 其他表单数据
      }
    };
  }
};
</script>

在这个例子中，formData 对象被用作 el-form 的 model。每个表单项，如 <el-input> 都与 formData 对象中的特定属性进行了双向绑定（v-model="formData.name"，v-model="formData.age"）。这意味着输入框中的值会与 formData 对象中的相应属性实时同步。

通过使用 model 属性，el-form 能够以一种简单且有效的方式管理表单数据，并在数据模型发生改变时同步更新表单项的值，同时也能在用户对表单项进行更改时更新数据模型。

indent

indent属性用于设置表格树形数据缩进的宽度。

当在 el-table 中展示树形数据时，indent 属性用于定义每一级缩进的宽度，以便更好地展示树状结构，使层级关系更加清晰和易于阅读。

该属性的功能在于控制每一级层级之间的缩进距离，从而使树形数据更具可读性。你可以设置这个属性来适应你的界面布局和设计需求，使得树形结构更加清晰地显示在表格中。

示例：

<el-table :data="tableData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :indent="20">
  <!-- 表格的其他设置 -->
</el-table>

在这个示例中，:indent="20" 设置了缩进的宽度为 20 像素。这个设置使得每一级树形结构在表格中的缩进为 20 像素，使得层级关系更加清晰。

rules

在 Element UI 的 el-form 组件中，rules 是一个用于定义表单验证规则的属性。这个属性允许你为表单的每个字段定义验证规则，以确保用户输入的数据符合特定要求。

规则（rules）是一个对象，通常包含每个表单字段对应的验证规则。每个字段的验证规则可以包括多个条件，比如必填、最小长度、最大长度、正则匹配等。

举例来说：

<template>
  <el-form :model="formData" :rules="formRules" label-width="80px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="formData.age"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: null
        // 其他表单数据
      },
      formRules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '年龄不能为空', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值', trigger: 'blur' },
          { min: 18, message: '必须年满18岁', trigger: 'blur' }
        ],
        // 其他表单项的验证规则
      }
    };
  }
};
</script>

在这个例子中，formRules 对象定义了 formData 中每个字段的验证规则。name 字段的规则要求是必填项，当失去焦点时触发验证（trigger: ‘blur’）。而 age 字段的规则包括必填项、必须为数字、最小值为 18 等条件。

当用户在输入表单时，根据定义的 rules 规则，表单会根据 trigger 触发相应的验证规则，从而实现数据的验证。如果数据不符合规则，对应的错误提示信息会被显示。这种机制有助于确保用户输入的数据符合要求，提升表单的可靠性和用户体验。

@submit

@submit 是 Vue 中的事件监听器之一，用于监听表单提交事件。

在 Vue 中，@ 符号是 v-on 指令的简写形式，用于监听 DOM 事件。
@submit 监听的是表单的提交事件，当用户提交表单时触发相应的逻辑或方法。

<template>
  <form @submit="handleSubmit">
    <!-- 表单内容 -->
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    handleSubmit() {
      // 处理表单提交的逻辑
      // 可能会阻止默认提交行为或执行其他操作
      console.log('Form submitted!');
    }
  }
};
</script>

在上述示例中，@submit 用于监听表单的提交事件。当用户点击表单中的提交或确定按钮时，触发了 handleSubmit 方法。在该方法中，你可以处理表单提交的逻辑，比如验证表单数据、阻止默认提交行为、执行其他操作等。

这样的设计允许你在用户提交表单时执行特定的自定义逻辑，而不仅仅是浏览器的默认行为。