vue+elementui 新增、编辑同弹窗数据回显

1、主页面

template-弹窗

<el-dialog width="1000px" align="center" :title="editInfo == null? '新增公告信息' : '编辑公告信息'" :visible.sync="platformAddDialog"> <addformForm ref="addform" :editInfo="editInfo" @closeDialog="closeDialog" @addformSuccess="addformSuccess"/> </el-dialog>

data

platformAddDialog: false, // 新增弹框状态值 editInfo: null,

methods

注意时间格式传入及回显

// 新增 addHandle() { this.editInfo = null this.platformAddDialog = true; }, // 新增成功回调函数 addformSuccess() { this.platformAddDialog = false; this.getList() }, // 编辑 editHandle(id) { getNoticeById(id) .then(res => { if(res.state == 0) { this.$nextTick(()=>{ this.editInfo = Object.assign({},res.data) ; this.editInfo.startDatetime = String(new Date(this.editInfo.startDatetime)); this.editInfo.endDatetime = String(new Date(this.editInfo.endDatetime)); }) this.platformAddDialog = true; } else { this.$message.error(err.message || '请求公告信息失败') } }) .catch(err => { this.$message.error(err.message || '请求公告信息失败') }) },

2、弹窗组件

template

<el-form class="leado-add-form" :model="addParamForm" :rules="rules" ref="addParamForm" label-width="200px"> <el-form-item label="公告标题:" prop="noticeTitle"> <el-input max=6 v-model="addParamForm.noticeTitle"></el-input> </el-form-item> <el-form-item label="公告类型:" prop="noticeType"> <el-select v-model="addParamForm.noticeType" placeholder="请选择"> <el-option v-for="item in $store.state.notice.noticeType" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="开始时间:" prop="startDatetime" v-if="addParamForm.noticeType == 2"> <el-date-picker v-model="addParamForm.startDatetime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker> </el-form-item> <el-form-item label="结束时间:" prop="endDatetime" v-if="addParamForm.noticeType == 2"> <el-date-picker v-model="addParamForm.endDatetime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker> </el-form-item> <el-form-item> <el-button type="info" @click="submitForm('addParamForm')" :loading="loading">保存</el-button> <el-button type="primary" @click="resetForm('addParamForm')" :loading="loading" v-if="editInfo == null">重置</el-button> <el-button @click="cancle()">取消</el-button> </el-form-item> </el-form>

data

addParamForm: { noticeTitle: this.editInfo == null ? '' : this.editInfo.noticeTitle, noticeType: this.editInfo == null ? '' : this.editInfo.noticeType, isHomePageDisplay: this.editInfo == null ? '' : this.editInfo.isHomePageDisplay, startDatetime: this.editInfo == null ? '' : this.editInfo.startDatetime, endDatetime: this.editInfo == null ? '' : this.editInfo.endDatetime, },

watch

watch: { editInfo: { handler : function (val) { this.addParamForm.noticeTitle= val == null ? '' : val.noticeTitle; this.addParamForm.noticeType= val == null ? '' : val.noticeType; this.addParamForm.isHomePageDisplay= val == null ? '' : val.isHomePageDisplay; this.addParamForm.startDatetime= val == null ? '' : val.startDatetime; this.addParamForm.endDatetime= val == null ? '' : val.endDatetime; } } }