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 提供多种布局方式：
- 行内表单：
<el-form inline>
<!-- 表单元素将水平排列 -->
</el-form>- 响应式布局：
<el-form label-position="top">
<!-- 标签在上方 -->
</el-form>- 多列布局：
<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>
