Input 输入框
<el-input> 是一个基本的文本输入框组件，用于接收用户的文本输入。
<template>
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
</template>
<script>
export default {
data() {
return {
inputValue: '',
};
},
};
</script>
在上述例子中，v-model 指令用于实现数据的双向绑定，将输入框的值与 inputValue 数据属性关联起来。
Radio 单选框
<el-radio> 是用于选择单个选项的单选框组件。
<template>
<el-radio v-model="radioValue" label="option1">选项一</el-radio>
<el-radio v-model="radioValue" label="option2">选项二</el-radio>
</template>
<script>
export default {
data() {
return {
radioValue: 'option1',
};
},
};
</script>
Checkbox 多选框
<el-checkbox> 是用于选择多个选项的多选框组件。
<template>
<el-checkbox v-model="isChecked">是否选中</el-checkbox>
</template>
<script>
export default {
data() {
return {
isChecked: false,
};
},
};
</script>
Select 选择器
<el-select> 是一个下拉选择框组件，用于从预定义的选项中选择一个或多个值。
<template>
<el-select v-model="selectedValue" placeholder="请选择">
<el-option label="选项一" value="option1"></el-option>
<el-option label="选项二" value="option2"></el-option>
<el-option label="选项三" value="option3"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
};
},
};
</script>
Form 表单
<el-form> 是一个用于包装表单元素的容器组件，可以包含输入框、单选框、多选框等表单元素。
<template>
<el-form :model="formData" ref="form" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="formData.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
username: '',
password: '',
},
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 表单验证通过，可以进行提交操作
console.log('表单验证通过');
} else {
// 表单验证不通过，给予用户提示
console.log('表单验证不通过');
}
});
},
},
};
</script>
在上述例子中，通过使用 <el-form> 和 <el-form-item> 组件，以及绑定 v-model 实现表单数据的收集和验证。
以上是 Element Plus 中一些常见的表单组件的基本使用示例。你可以根据具体的需求和业务场景，选择适当的表单组件，并按照官方文档提供的属性和方法进行配置和使用。详细的文档可以在 Element Plus 的[官方文档](https://element-plus.org/#/en-US/component/form)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/5529/ElementPlus