【element-ui】dialog中使用select，下拉列表被挡住_el-dialog中高度很小 el-select下拉框看不到-优快云博客

本文链接：https://blog.youkuaiyun.com/nefu1234/article/details/89643588

在使用Element-UI的Dialog组件时遇到一个常见问题，即当Dialog内部包含一个Select组件，下拉列表可能会被Dialog本身或者其他元素遮挡。解决方法是通过设置Select的CSS样式，特别是提高`z-index`属性的值，例如设置为999，确保其层级高于其他元素，从而显示正常。实践证明，这种方法能有效解决下拉列表显示不全的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个问题是因为下拉框层级太低被挡住了，修改层级就可以了

<el-dialog
                title="增加指标"
                :visible.sync="adddialogVisible"
                width="30%"
                center>
                <el-form ref="form" size="small" :model="addform" label-width="80px">
                    <el-col :span="12">
                    <el-col :span="12">
                    <el-form-item label="指标">
                        <el-input v-model="addform.goalindex" disabled></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="指标描述">
                            <el-select v-model="addform.goaldes" style="z-index:999;"
                            placeholder="请选择指标描述" >
                                <el-option
                                v-for="item in goalsDes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                        <el-form-item label="目标区间">
                            <el-date-picker
                                style="width:100%"
                                v-model="addform.goalmonth"
                                type="monthrange"
                                range-separator="-"
                                start-placeholder="开始月份"
                                end-placeholder="结束月份">
                            </el-date-picker>
                        </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer" style="dispaly:block">
                    <el-button  size="small" @click="adddialogVisible = false">取 消</el-button>
                    <el-button type="primary" size="small" @click="adddialogVisible = false">确 定</el-button>
                </span
    </el-dialog>

重点在 style=“z-index:999;”
有图有真相
在这里插入图片描述