element ui dialog 里面嵌套 form表单 长度为400 宽度为400
可以使用以下代码实现:
<el-dialog title="Dialog with Form" :visible.sync="dialogVisible" :modal="false" :width="400" :height="400">
<el-form :model="form" label-width="80px">
<el-form-item label="Name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="Email">
<el-input v-model="form.email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="submitForm">Submit</el-button>
</span>
</el-dialog>
需要注意以下几点:
- 使用
el-dialog组件来创建对话框,可以使用:width和:height属性来设置宽度和高度。 - 在对话框中嵌套
el-form组件来创建表单。 - 在表单中使用
el-input组件来创建输入框。 - 在对话框的底部使用
slot="footer"来添加底部按钮。 - 在底部按钮中使用
@click绑定方法来处理点击事件。
原文地址: https://www.cveoy.top/t/topic/bfRI 著作权归作者所有。请勿转载和采集!