在前端开发中，表单是不可避免的一部分。随着单页面应用（SPA）的流行，富有交互性的表单成为了前端开发的一大挑战。如何在 SPA 中实现富有交互性的表单呢？本文将介绍如何使用 Element UI 实现此目的。
什么是 Element UI？
Element UI 是一套基于 Vue.js 2.0 的桌面端组件库，它提供了多种常用的 UI 组件，包括表单、按钮、弹窗、选择器等等。而且使用 Element UI 可以极大地提高开发效率，因为它具有丰富的文档和示例，可以快速搭建出富有交互性且美观的 UI 界面。
Element UI 表单组件
Element UI 提供了多种表单组件，包括输入框、单选框、多选框、下拉选择框、日期选择框等等。这些组件都具有丰富的属性和方法，可以满足不同的业务需求。
基本使用
下面是一个最简单的使用 Element UI 输入框的示例：
<el-form>
<el-form-item label="姓名">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>这段代码使用了 el-form、el-form-item 和 el-input 这三个组件。其中，el-form 是一个表单容器，用于包裹表单项。el-form-item 是表单项组件，用于包裹 el-input 组件，并提供了 label 和验证等功能。而 el-input 则是一个输入框组件，用于接收用户输入。
这里的 v-model="form.username" 是一个 Vue.js 的指令，用于将输入框的值绑定到 form 对象的 username 属性上。在 Vue.js 中，我们可以使用 v-model 实现双向数据绑定，即输入框的值发生变化时，form 对象中的相应属性也会发生变化。
表单验证
Element UI 还提供了丰富的表单验证功能，可以实现各种复杂的验证规则。
首先，我们需要在 el-form-item 中设置 prop 属性，用于指定验证规则的名称。然后，在 el-form 中可以使用 ref 属性设置表单的引用，以便在验证时获取表单数据。
下面是一个示例代码：
// javascriptcn.com 代码示例
<el-form :model="form" ref="form" :rules="rules" label-width="80px">
<el-form-item label="姓名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="数字" prop="number">
<el-input v-model="form.number"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>// javascriptcn.com 代码示例
<script>
export default {
data() {
return {
form: {
username: '',
number: ''
},
rules: {
username: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
],
number: [
{ required: true, message: '请输入数字', trigger: 'blur' },
{ type: 'number', message: '必须为数字值', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
// 验证表单
this.$refs.form.validate((valid) => {
if (valid) {
// 表单验证通过，执行操作
console.log('submit');
} else {
// 表单验证不通过
console.log('error');
return false;
}
});
}
}
}
</script>在这里，我们使用 :model="form" 属性将表单数据绑定到 form 对象上。同时，使用 prop 属性设置 el-form-item 的验证规则，将其与 rules 对象中的属性名对应起来。在提交表单时，我们可以使用 this.$refs.form.validate() 方法进行表单验证。在这个方法中，如果表单验证通过，会执行回调函数；否则，会提示错误信息。
表单联动
在实际开发中，表单联动是一个常见的需求。例如，在一个表单中，当选择了某个选项时，其他选项的可选项会发生变化。在 Element UI 中，可以使用 watch（监视）属性来实现表单联动。
下面是一个示例代码：
// javascriptcn.com 代码示例
<el-form :model="form" label-width="80px">
<el-form-item label="选择框">
<el-select v-model="form.select" placeholder="请选择" @change="selectChange">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item v-show="showInput" label="输入框">
<el-input v-model="form.input"></el-input>
</el-form-item>
</el-form>// javascriptcn.com 代码示例
<script>
export default {
data() {
return {
form: {
select: '',
input: ''
},
showInput: false
}
},
methods: {
selectChange(value) {
if (value === '1') {
this.showInput = true;
} else {
this.showInput = false;
this.form.input = '';
}
},
}
}
</script>在这里，我们首先定义了一个 showInput 变量来控制输入框是否显示。在 selectChange 方法中，我们使用 @change 事件监听选择框的变化。当选择了值为 '1' 的选项时，输入框会显示；否则，输入框会隐藏，并将 form.input 的值重置为空。
总结
本文介绍了如何使用 Element UI 实现富有交互性的表单。首先，我们介绍了 Element UI 的基础知识和表单组件，包括输入框、单选框、多选框、下拉选择框、日期选择框等等。然后，我们介绍了表单验证的使用方法，包括设置验证规则、使用 ref 属性引用表单和执行表单验证。最后，我们介绍了如何使用 watch 属性实现表单联动。
在实际开发中，使用 Element UI 可以快速搭建出富有交互性且美观的 UI 界面，同时又能够实现各种复杂的业务需求。如果你想深入了解 Element UI 的使用方法，建议查看其官方文档，以获得更多的学习和指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6543b9bd7d4982a6ebd97f57