自定义Element UI <el-dialog>的z-index属性

在使用Element UI的<el-dialog>组件时，如果你希望自定义<el-dialog>的z-index属性或者更具体地，希望调整el-dialog__wrapper的z-index，以便它能够覆盖页面上其他更高z-index的元素，你可以通过几种方法来实现。

1. 使用:z-index属性

首先，最直接的方式是使用<el-dialog>组件提供的:z-index属性。这个属性允许你直接设置对话框的z-index值。请注意，这个属性设置的是<el-dialog>元素的z-index，而不是内部的el-dialog__wrapper。然而，在大多数情况下，直接设置<el-dialog>的z-index足以满足需求，因为el-dialog__wrapper通常会继承或跟随其父元素（即<el-dialog>）的z-index。

<el-dialog  
  title="提示"  
  :visible.sync="dialogVisible"  
  :z-index="9999"  
>  
  <!-- 内容 -->  
</el-dialog>

2. 使用CSS覆盖

如果你需要更精细地控制el-dialog__wrapper的z-index（尽管这通常不是必需的），你可以通过全局或局部CSS来覆盖默认样式。但请注意，直接修改Element UI的内部类（如el-dialog__wrapper）可能会在未来的版本更新中导致样式冲突或失效。

/* 全局样式，可能影响到所有Dialog */  
.el-dialog__wrapper {  
  z-index: 9999 !important;  
}  
  
/* 或者，更具体的选择器，以减少影响范围 */  
.your-custom-class .el-dialog__wrapper {  
  z-index: 9999 !important;  
}

在HTML中使用这个自定义类：

<el-dialog  
  class="your-custom-class"  
  title="提示"  
  :visible.sync="dialogVisible"  
>  
  <!-- 内容 -->  
</el-dialog>

3. 动态绑定样式

如果你需要基于某些条件动态地改变z-index，你可以使用Vue的绑定样式功能。不过，对于z-index这样的属性，使用:style绑定可能不是最直观的，因为z-index通常不直接通过:style绑定到元素上（除非你是通过对象字面量的方式）。但在这种情况下，使用:z-index属性或CSS覆盖可能更合适。

注意事项

• 尽量避免全局修改Element UI的样式，因为这可能会影响到你项目中的其他部分。
• 在使用:z-index属性时，确保你了解它直接作用于<el-dialog>元素，而不是内部的el-dialog__wrapper。
• 如果你确实需要修改el-dialog__wrapper的样式，请确保你的选择器足够具体，以避免不必要的样式冲突。