ElementUI弹出新增窗口

新建按钮绑定单击事件，对应的处理函数为handleCreate

<el‐button type="primary" class="butT" @click="handleCreate()">新建</el‐ button>// 重置表单
resetForm() { this.formData = {};
},
// 弹出添加窗口
handleCreate() { this.resetForm(); this.dialogFormVisible = true;
}

定义模型数据：

tableData:[],//新增和编辑表单中对应的检查项列表数据
checkitemIds:[],//新增和编辑表单中检查项对应的复选框，基于双向绑定可以进行回显 和数据提交

动态展示检查项列表数据，数据来源于上面定义的tableData模型数据

<table class="datatable"> <thead> <tr><th>选择</th> <th>项目编码</th> <th>项目名称</th> <th>项目说明</th> </tr> </thead> <tbody> <tr v‐for="c in tableData"> <td><input :id="c.id" v‐model="checkitemIds" type="checkbox" :value="c.id"> </td> <td><label :for="c.id">{{c.code}}</label></td> <td><label :for="c.id">{{c.name}}</label></td> <td><label :for="c.id">{{c.remark}}</label></td> </tr> </tbody> </table>

完善handleCreate方法，发送ajax请求查询所有检查项数据并将结果赋值给 tableData模型数据用于页面表格展示：

// 弹出添加窗口
handleCreate() { this.dialogFormVisible = true; this.resetForm(); //默认切换到第一个标签页（基本信息） this.activeName='first'; //重置 this.checkitemIds = []; //发送ajax请求查询所有检查项信息             axios.get("/checkitem/findAll.do").then((res)=> { if(res.data.flag){ //将检查项列表数据赋值给模型数据用于页面表格展示 this.tableData = res.data.data; }else{ this.$message.error(res.data.message); } });
}

ElementUI弹出新增窗口相关推荐

window.showModalDialog弹出模态窗口
[转http://www.cnblogs.com/zhouzhaokun/archive/2011/11/14/2248523.html] 在我们平时的B/S web开发当中,可能很多时候我们需要有这 ...
实战清除电脑上恶意弹出广告窗口
实战清除电脑上恶意弹出广告窗口当你碰到电脑桌面右下角时不时弹出广告,如游戏推广.商品广告等,怎么删也删不掉,这是因为用户不小心安装有捆绑广告推广的软件,系统被静默安装了恶意木马广告,这不仅仅是影响用 ...
asp.net js函数弹出登录窗口_JS基础 | Cocos Creator 开发环境搭建
编程并不只是简单地写代码,而是要将编写的代码运行在指定平台环境上,在此之前我们还需要搭建生产代码的环境. 一. 软件准备 Chrome:浏览器,用于预览.调试我们的游戏 VSCode:代码编辑器,用于 ...
%matplotlib inline是jupyter notebook里的命令, 意思是将那些用matplotlib绘制的图显示在页面里而不是弹出一个窗口
%matplotlib inline是jupyter notebook里的命令, 意思是将那些用matplotlib绘制的图显示在页面里而不是弹出一个窗口终端输入jupyter notebook, ...
***小程序wx.getUserInfo不能弹出授权窗口后的解决方案
***小程序wx.getUserInfo不能弹出授权窗口后的解决方案参考文章: (1)***小程序wx.getUserInfo不能弹出授权窗口后的解决方案 (2)https://www.cnblog ...
java bat 运行 jar文件_运行bat文件启动java的jar且不弹出DOS窗口，后台运行java的jar包...
本文主要是将java的jar包启动的cmd命令添加到bat文件来执行,且不弹出DOS窗口,也就是后台运行java的jar包. 这里以win10为例 1.新建一个txt文件,在文件添加以下内容.其中E ...
用MPLAB IDE编程时，软件总是弹出一个窗口提示： “the extended cpu mode configuration bit is enabled,but the program that
用MPLAB IDE编程时,软件总是弹出一个窗口提示: "the extended cpu mode configuration bit is enabled,but the program ...
OOALV 中DATA_CHANGED_FINISHED调用刷新弹出排序窗口解决方案
DATA_CHANGED_FINISHED 中使用刷新方法REFRESH_TABLE_DISPLAY 会导致sort 出现强制弹出选择字段的窗口的异常情况. CLASS LCL_EVENTS DEFI ...
自动弹窗被拦截 html,弹出式窗口被阻止怎么办,如何阻止弹出式窗口
很多人看到"弹出式窗口"这个名词时想必会有所疑惑,弹出与固定式窗口究竟有何不同呢?其实我们在浏览网页的时候就会发现许多弹出式窗口,这种窗口主要应用于广告类,许多商家会为各种大小网页 ...

ElementUI弹出新增窗口

ElementUI弹出新增窗口相关推荐

最新文章

热门文章