el-dialog 局部loading 无效，不显示问题

el-dialog 局部loading 不显示问题

1 问题：loading 无法显示

 var loading = this.$loading({
   target:'.el-dialog'
 })
 getStoreAreaInfo(this.formData).then(res => {
   this.formData = res.data.list
   loading.close()
 })

2 原因 和解决方法

原因

• target 传入的’.el-dialog’ 是通过document.querySelector获取到对应 DOM 节点进行覆盖。
• 而当 .el-dialog 存在多个时 querySelector 只能匹配到第一个,其他的匹配不到

两种解决方法

• 第一种: 使用id 选择器

 var loading = this.$loading({
   target:'对应的id选择器' 
 })

• 第二中：将需要用到的loading 的 el-dialog 的代码排到所有dialog的最前面

<el-dialog>
//  用到loading的dialog 
</el-dialog>

<el-dialog>
//  没用到loading
</el-dialog>

<el-dialog>
//  没用到loading
</el-dialog>