類似於這種,相信會有很多人遇到這種問題的,其實解決的方法很簡單
<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 元素上