以下是一个简单的例子，演示如何在 Vue.js 中使用 Element Plus 的 Form 表单：
首先，确保你已经引入了 Element Plus 库。你可以通过以下方式之一来引入：
1. 使用 npm 安装：
npm install element-plus --save
然后在你的项目中使用：
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
2. 直接在 HTML 中引入：
<!-- 在你的 HTML 文件中引入 Element Plus 的 CSS 文件 -->
<link rel="stylesheet" href="path/to/element-plus/theme-chalk/index.css">
<!-- 在你的 HTML 文件中引入 Element Plus 的 JS 文件 -->
<script src="path/to/element-plus/index.js"></script>
然后，在你的 Vue 组件中使用 Form 表单：
<template>
<div>
<el-form :model="form" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="form.age" type="number"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
gender: ''
}
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$message.success('提交成功');
} else {
this.$message.error('表单验证失败');
return false;
}
});
}
}
}
</script>
在上述例子中，v-model 用于双向绑定表单数据，label-width 设置了表单标签的宽度，el-form-item 用于包裹表单项，prop 设置了表单项对应的字段名，el-input、el-radio-group 等用于生成表单控件，el-button 是提交按钮。
转载请注明出处：http://www.zyzy.cn/article/detail/5547/ElementPlus