【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面

解决elementui多层dialog弹窗遮罩问题

弹窗套娃出现了整个屏幕都是遮罩层的问题，需要鼠标点击一下才能正常。

在弹窗组件代码上加上 append-to-body 就可以了，表示这个弹窗是嵌在body上的

elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据

所以呢，想了一个曲线救国的办法，定义一个属性，控制只读和可修改，当界面只读的时候直接显示一个div渲染数据，这个select就销毁，可编辑的时候显示select，div销毁

<el-form-item label="标准分类" :prop="'types.' + tyIdx + '.typeName'" :rules="[{required: true,message: '请选择标准分类',trigger: 'blur'}]"><sp-select v-model="tyItem.typeName" :maxlength="255"placeholder="请选择分类(必填)" v-if="!isView"><el-option v-for="typeItem in Types || []":value="typeItem.typeName" :key="typeItem.id":label="typeItem.typeName"></el-option></sp-select><div v-if="isView">{{tyItem.typeName}}</div>
</el-form-item>

从弹窗子组件获取数据后需要刷新页面

在子组件弹窗上传文件后需要刷新父组件的界面，用子组件向父组件传值的方法传递一个页面刷新事件，让父组件自调用就好了

父组件

<!-- 导入/更新 -->
<el-dialog v-if="visibleImport" :visible.sync="visibleImport" custom-class="import-user-dialog" width="80%"title="模板导入" class="dialog-max-width" append-to-body><div><ImportFile :attribute="form.attribute" :templateName="form.templateName" :type="form.type" :proportionOfWeight="form.proportionOfWeight" :remark="form.remark" v-if="visibleImport" @closeImport="visibleImport = false"@finishImport="finishImport" /></div>
</el-dialog>

handleImport() {this.visibleImport = true
},
finishImport(data) {location.reload()
},

子组件

<el-upload class="upload-btn-box" drag :multiple="false" :limit="2" accept=".xls, .xlsx" action:file-list="fileList" :before-remove="removeFile" :http-request="uploadUserList" :on-change="onChange"><i class="el-icon-upload"></i><div class="el-upload__text"><div><em>点击</em>或拖拽文件到此区域进行上传</div><div slot="tip" class="el-upload__tip">上传已填写好考核模板表格，仅支持扩展名.xls、.xlsx的文件</div></div>
</el-upload>

// 关闭
closeDialog() {this.$emit('closeImport', false)
},// 完成finishImport(data) {this.$emit('finishImport',data)},

// 确认上传导入
confirmImportUser() {if (!this.uploaderFileObj) {return}const formdata=new FormData()formdata.append("attribute",this.attribute)formdata.append("file",this.uploaderFileObj)formdata.append("proportionOfWeight",this.proportionOfWeight)formdata.append("remark",this.remark)formdata.append("templateName",this.templateName)formdata.append("type",this.type)axios({url: `${process.env.REQUEST_BASE_URL}${process.env.BASE_API}/v1/appraisal/template/excel`,method: 'post',headers: {'Content-Type':'multipart/form-data; boundary=----WebKitFormBoundaryVCFSAonTuDbVCoAN',Authorization: 'Bearer ' + Cookies.get(process.env.TOKEN_KEY),},data:formdata,}).then(({data}) => {if (data && data.code == 200) {this.$message({message: '导入成功',type: 'success',duration: 1500,})this.stepActive = 3this.waitImport = falsethis.finishImport(data)} else {this.$message({message: '导入失败！' + data.msg,type: 'warning',duration: 2500,onClose: () => {},})}}).catch(() => {this.$message.error('异常错误')})
},

【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面相关推荐

天河微信小程序入门《四》：融会贯通，form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
form提交php怎么接收不到,php form表单post提交获取不到数据，而使用get提交能获取到数据的解决办法...
开发环境:xampp,mac,phpstorm 其实出现这个问题的原因就是在于phpstorm,它默认使用的是自带的内部服务器,这个服务器使用63342端口,而且服务器内部有问题,导致POST方法异常 ...
form表单的一个页面多个上传按钮实例
/* * 图片上传 */@RequestMapping("/uploadFile") @ResponseBody public String uploadFile(@Request ...
form表单以ajax方法提交，附加额外的数据
在项目中有个添加账户的模块,如下图.填写的信息以表单是形式ajax的方法提交,但是又需要添加额外信息给后台(比如:创建人),首先要引入JQuery.js库,和jquery.form.js var op ...
js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题...
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
form表单file,select选择后自动提交
form表单file.select选择后自动提交 1.input type="file"控件自动提交,常用于修改用户图片等处.(注:post,get方式都行) <?php i ...
form表单获取input对象浏览器区别
如果一个html页面有两个form表单,每个input框name相同ID不同,IE会认识name而识别ID,这时它只会取第一个form的input值,firefox识别正常! 2012=-07-23 ...
vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
快速刷新页面ajax出现404,react使用BrowserRouter打包后，刷新页面出现404
nginx nginx.conf server { listen 80 default_server; server_name /var/www/example.com; root /var/www/ ...

【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面

解决elementui多层dialog弹窗遮罩问题

elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据

从弹窗子组件获取数据后需要刷新页面

【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面相关推荐

最新文章

热门文章