好的，以下是一个简
单的示例代码：
```html
<template>
<div>
<el
-button type="primary" @click="showDialog">打开
弹出层</el
-button>
<el
-dialog title="
表单弹出层" :visible.sync="dialogVisible">
<el
-form ref="form" :model="form" label
-width="80px">
<el
-form
-item label="姓名">
<el
-input v
-model="form.name"></el
-input>
</el
-form
-item>
<el
-form
-item label="年龄">
<el
-input v
-model.number="form.age"></el
-input>
</el
-form
-item>
</el
-form>
<div slot="footer">
<el
-button @click="dialogVisible = false">取 消</el
-button>
<el
-button type="primary" @click="submitForm">确 定</el
-button>
</div>
</el
-dialog>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: null,
},
dialogVisible: false,
};
},
methods: {
showDialog() {
this.dialogVisible = true;
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
//
表单验证通过，提交
表单数据
console.log('
表单数据：', this.form);
this.dialogVisible = false;
}
});
},
},
};
</script>
```
解释一下代码：
1. 通过 `el
-dialog` 组件实现
弹出层的效果。
2. 使用 `el
-form` 和 `el
-form
-item` 组件创建
表单。
3. 通过 `v
-model` 绑定
表单数据。
4. 在
弹出层底部添加两个按钮，通过 `@click` 事件绑定对应的方法。
5. 在 `submitForm` 方法中，调用 `this.$refs.form.validate` 方法进行
表单验证，验证通过后提交
表单数据。
6. `v
-model.number` 可以将输入框的值转为数字类型。
希望这个示例能够帮助到你。
581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
