element-UI的Dialog弹出框蒙版被遮住

类似于这种,相信会有很多人遇到这种问题的,其实解决的方法很简单

<el-dialog title="修改分类" :visible.sync="modifyFormVisible" :modal-append-to-body="false" width="30%" center>
      <el-form :model="modifyData" ref="modifyForm" :rules="rules">
        <el-form-item label="分类名称:" label-width="100px" prop="categoryName">
          <el-input v-model="modifyData.categoryName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类级别:" label-width="100px" prop="categoryLevel">
          <el-input v-model="modifyData.categoryLevel" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="目录层级:" label-width="100px" prop="parentCode">
          <el-input v-model="modifyData.parentCode" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>

只需要加一条  :modal-append-to-body="false" 其实仔细看官方文档的同学也会发现这个的,它接受一个布尔值,默认为true的,我们需要把它改成false,让遮罩层插入至 body 元素上

posted @ 2018-06-13 16:24  一粒丶红尘  阅读(4718)  评论(0编辑  收藏  举报