在Vue 2版本中，element dialog組件在頁面中同時展示兩個el-dialog為什麼會展示一個灰色遮罩層？

在 Vue 2 中，使用 Element UI 2.x 版本時，如果在頁面中同時展示兩個 el-dialog 組件，可能會出現灰色遮罩層的問題。這是因為 el-dialog 組件在默認情況下會使用一個全局的遮罩層來阻止用戶對其他頁面元素的交互操作。當多個 el-dialog 組件同時出現時，由於默認的遮罩層是全局的，所以會導致出現一個灰色遮罩層。

要解決這個問題，你可以為每個 el-dialog 組件設置 modal 屬性為 false，這樣就可以避免全局遮罩層的出現。例如：

<template>
  <div>
    <el-dialog :visible="dialog1Visible" :modal="false">
      <!-- Dialog 1 content -->
    </el-dialog>
    
    <el-dialog :visible="dialog2Visible" :modal="false">
      <!-- Dialog 2 content -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialog1Visible: false,
      dialog2Visible: false
    }
  }
  // ...
}
</script>

通過將每個 el-dialog 組件的 modal 屬性設置為 false，你可以同時展示多個 el-dialog 組件而不會出現灰色遮罩層。