form表单elementui

Form 表单 ElementUI 使用指南

ElementUI 提供了强大的表单组件，支持数据绑定、验证和自定义样式等功能。以下是使用方法和常见场景的解决方案。

基本表单结构

使用 el-form 包裹表单元素，通过 model 绑定数据对象：

<el-form :model="formData" label-width="120px">
  <el-form-item label="用户名">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
</el-form>

数据对象需要在 Vue 实例中定义：

data() {
  return {
    formData: {
      username: ''
    }
  }
}

表单验证

ElementUI 表单支持通过 rules 属性进行验证：

<el-form :model="formData" :rules="rules" ref="form">
  <el-form-item label="密码" prop="password">
    <el-input v-model="formData.password" type="password"></el-input>
  </el-form-item>
</el-form>

验证规则定义：

data() {
  return {
    rules: {
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
      ]
    }
  }
}

手动触发验证：

methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 表单验证通过
      }
    })
  }
}

表单布局

ElementUI 提供多种布局方式：

1. 行内表单：

<el-form inline>
  <!-- 表单元素将水平排列 -->
</el-form>

1. 响应式布局：

<el-form label-position="top">
  <!-- 标签在上方 -->
</el-form>

1. 多列布局：

<el-row :gutter="20">
  <el-col :span="12">
    <el-form-item label="字段1">
      <el-input></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="字段2">
      <el-input></el-input>
    </el-form-item>
  </el-col>
</el-row>

动态表单

动态添加或删除表单项：

<el-form-item
  v-for="(item, index) in formData.items"
  :key="index"
  :label="'项目' + index">
  <el-input v-model="item.value"></el-input>
  <el-button @click="removeItem(index)">删除</el-button>
</el-form-item>
<el-button @click="addItem">添加项目</el-button>

对应方法：

methods: {
  addItem() {
    this.formData.items.push({ value: '' })
  },
  removeItem(index) {
    this.formData.items.splice(index, 1)
  }
}

表单提交

处理表单提交时，通常需要验证后发送请求：

methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (!valid) return

      axios.post('/api/submit', this.formData)
        .then(response => {
          // 处理成功响应
        })
        .catch(error => {
          // 处理错误
        })
    })
  }
}

自定义表单组件

集成自定义组件到 ElementUI 表单：

<el-form-item label="自定义组件" prop="customField">
  <custom-component v-model="formData.customField"></custom-component>
</el-form-item>

确保自定义组件实现了 v-model 协议：

props: ['value'],
methods: {
  handleChange(newVal) {
    this.$emit('input', newVal)
  }
}

表单重置

重置表单到初始状态：

methods: {
  resetForm() {
    this.$refs.form.resetFields()
  }
}

禁用表单

禁用整个表单或特定字段：

<el-form disabled>
  <!-- 所有字段禁用 -->
</el-form>

<el-input :disabled="true"></el-input>

表单样式定制

通过 CSS 覆盖默认样式：

.el-form-item__label {
  color: #666;
}
.el-input__inner {
  border-radius: 4px;
}

使用 size 属性统一控制表单元素大小：

<el-form size="small">
  <!-- 所有表单元素为小尺寸 -->
</el-form>