ElementUI弹出新增窗口
生活随笔
收集整理的這篇文章主要介紹了
ElementUI弹出新增窗口
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
新建按鈕綁定單擊事件,對(duì)應(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:[],//新增和編輯表單中對(duì)應(yīng)的檢查項(xiàng)列表數(shù)據(jù) checkitemIds:[],//新增和編輯表單中檢查項(xiàng)對(duì)應(yīng)的復(fù)選框,基于雙向綁定可以進(jìn)行回顯 和數(shù)據(jù)提交 動(dòng)態(tài)展示檢查項(xiàng)列表數(shù)據(jù),數(shù)據(jù)來(lái)源于上面定義的tableData模型數(shù)據(jù) <table class="datatable"> <thead> <tr><th>選擇</th> <th>項(xiàng)目編碼</th> <th>項(xiàng)目名稱</th> <th>項(xiàng)目說(shuō)明</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請(qǐng)求查詢所有檢查項(xiàng)數(shù)據(jù)并將結(jié)果賦值給 tableData模型數(shù)據(jù)用于頁(yè)面表格展示: // 彈出添加窗口 handleCreate() { this.dialogFormVisible = true; this.resetForm(); //默認(rèn)切換到第一個(gè)標(biāo)簽頁(yè)(基本信息) this.activeName='first'; //重置 this.checkitemIds = []; //發(fā)送ajax請(qǐng)求查詢所有檢查項(xiàng)信息 axios.get("/checkitem/findAll.do").then((res)=> { if(res.data.flag){ //將檢查項(xiàng)列表數(shù)據(jù)賦值給模型數(shù)據(jù)用于頁(yè)面表格展示 this.tableData = res.data.data; }else{ this.$message.error(res.data.message); } }); }?
總結(jié)
以上是生活随笔為你收集整理的ElementUI弹出新增窗口的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ElementUI Container布
- 下一篇: Lua脚本语言应用场景