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); 
        } 
    }); 
}