1、写入页面

<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogFormVisible"  @closed="handleClose"><el-form :model="form" :rules="rules" ref="ruleForm"><el-form-item label="活动名称" :label-width="formLabelWidth" prop="name"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="handleSave">确 定</el-button></div></el-dialog>

2、写入变量

dialogFormVisible: false,
form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''
},
formLabelWidth: '120px',
rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]
}

3、写入方法

handleClose () {this.$refs.ruleForm.resetFields()this.form = {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}},handleSave () {this.$refs.ruleForm.validate((valid) => {if (valid) {console.log('输入正确')this.dialogFormVisible = false} else {console.log('输入错误')}})}

Vue中el-dialog的用法相关推荐

详解Vue中watch的高级用法
转载自详解Vue中watch的高级用法我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...
「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、可用于更新数据到视图
夜晚有明月,梦里有佳人前言最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...
el表达式ne什么意思_JSP中EL表达式的用法详解(必看篇)
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
Vue中JSX的基本用法
基本用法首先需要约定一下,使用JSX组件命名采用首字母大写的驼峰命名方式,样式可以少的可以直接基于vue-styled-components写在同一个文件中,复杂的建议放在单独的_Styles.js ...
vue中的keep-alive的用法详细讲解
问题描述(什么是keep-alive) keep-alive顾名思义,保持活跃.保持谁活跃呢? 首先我们知道,因为vue就是组件化编程,一个.vue文件就是一个组件.就像万事万物一样,都有从出生到消亡 ...
vue中引入路径的用法
一.Vue文件中引用路径的介绍 1.路径 ./ ./当前文件同级目录 2.路径 -/ -/当前文件上一级目录 3.@符号 @ 的作用是在你引入模块时,可以使用 @ 代替 /src 目录,避免易错的相对 ...
Vue中v-on的基础用法、参数传递和修饰符
目录一.v-on的基本用法使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可 ...
vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
vue中slot插口的用法
关于slot插口的作用:可以借助input中的placeholder占位属性来理解. 若子组件中插入DOM元素时,则slot不显示,如果没有插入一些DOM的时候,则slot显示.简单的实例如下: &l ...
VUE中$refs的基本用法
ref 有三种用法: 1.ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素 2.ref 加在子组件上,用this.r e f s . ( r e f 值 ) 获取 ...

Vue中el-dialog的用法

1、写入页面

2、写入变量

3、写入方法

Vue中el-dialog的用法相关推荐

最新文章

热门文章