vue+Element中,新增模态框
2019-06-13 12:35
991 查看
上代码
<el-button type="success" @click="addgsForm" icon="el-icon-edit">新增</el-button> <el-dialog :title="title" :visible.sync="dialogAddgsVisible" @close="closeDialogAddgsVisible"> <el-form :model="addForm" :rules="rules" ref="addForm" > <el-form-item label="类别名称" :label-width="formLabelWidth"> <el-input v-model="addForm.name" autocomplete="off"></el-input> </el-form-item> <el-form-item label="排序" :label-width="formLabelWidth"> <el-input v-model="addForm.sort" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogAddgsVisible = false">取 消</el-button> <el-button type="primary" @click="saveAddForm('addForm')">确 定</el-button> </div> </el-dialog>
/** *点击新增按钮,弹出新增模态框 * @param */ addgsForm(){ this.dialogAddgsVisible = true; this.title="新增分类" }, /** *关闭或取消模态框,清空值 * @param */ closeDialogAddgsVisible(){ this.$refs.addForm.resetFields();//element封装的方法,清空模态框的值 this.title="" //初始化title的值 this.addForm={//初始化addForm中的值 name:"", sort:"", } }, /** *确定新增数据 * @param */ saveAddForm(aaa){ this.$refs[aaa].validate( (valid) => { console.log(this.$refs[aaa]) if(valid){ let params={ name:this.addForm.name, sort:this.addForm.sort } this.axios.post(`接口地址`,params).then( res =>{ alert('新增成功'); this.dialogAddgsVisible = false; // this.$router.push({name:'categories'}) this.init() }) } }) },
相关文章推荐
- 使用vue+element实现表格的新增、编辑(含下拉框)、删除功能(Vue开发二)
- Vue+Element实现表格编辑、删除、以及新增行的最优方法
- vue element dialog弹框 表单 编辑后再点击新增 表单无法重置问题
- vue+element实现表格新增、编辑、删除功能
- vue+Element,编辑模态框
- 用vue实现模态框组件
- vue theme-default保存找不到Module not found: Error: Can't resolve 'element-ui/lib/theme-default/index.css
- 详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
- Vue+Element UI+Lumen实现通用表格分页功能
- vue+element-ui动态生成多级表头的方法
- vue.js:[Vue warn]: Cannot find element:
- Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态
- vue常见错误:- Component template should contain exactly one root element. If you are using v-if on multi
- 解决Vue+Element ui开发中碰到的IE问题
- vue elementUI tree树形组件遇到的问题
- vue+element实现打印页面功能
- Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统
- vue+elementUI实现表格关键字筛选高亮
- vue实现模态框的通用写法
- Vue + Element UI 实现权限管理系统 前端篇(十五):嵌套外部网页