新建按鈕綁定單擊事件，對應(yīng)的處理函數(shù)為handleCreate

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

定義模型數(shù)據(jù)：

tableData:[],//新增和編輯表單中對應(yīng)的檢查項(xiàng)列表數(shù)據(jù) checkitemIds:[],//新增和編輯表單中檢查項(xiàng)對應(yīng)的復(fù)選框，基于雙向綁定可以進(jìn)行回顯 和數(shù)據(jù)提交 動態(tài)展示檢查項(xiàng)列表數(shù)據(jù)，數(shù)據(jù)來源于上面定義的tableData模型數(shù)據(jù) <table class="datatable"> <thead> <tr><th>選擇</th> <th>項(xiàng)目編碼</th> <th>項(xiàng)目名稱</th> <th>項(xiàng)目說明</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方法，發(fā)送ajax請求查詢所有檢查項(xiàng)數(shù)據(jù)并將結(jié)果賦值給 tableData模型數(shù)據(jù)用于頁面表格展示： // 彈出添加窗口 handleCreate() { this.dialogFormVisible = true; this.resetForm(); //默認(rèn)切換到第一個(gè)標(biāo)簽頁（基本信息） this.activeName='first'; //重置 this.checkitemIds = []; //發(fā)送ajax請求查詢所有檢查項(xiàng)信息 axios.get("/checkitem/findAll.do").then((res)=> { if(res.data.flag){ //將檢查項(xiàng)列表數(shù)據(jù)賦值給模型數(shù)據(jù)用于頁面表格展示 this.tableData = res.data.data; }else{ this.$message.error(res.data.message); } }); }

?

總結(jié)

以上是生活随笔為你收集整理的ElementUI弹出新增窗口的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。