Element plus 中抽屉组件的头部添加下划线不生效的问题！

最新推荐文章于 2024-09-13 14:34:15 发布

前端傻白

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量179

点赞数 1

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/zy_1235/article/details/141030170

版权

原因

在抽屉组件中添加了append-to-body属性，所以不生效，只要将append-to-body去掉就好

抽屉代码

<el-drawer :title="title" v-model="open" size="800px">
                <el-form ref="postRef" :model="deviceFrom" :rules="rules" label-width="100px" class="thin_font">
                    <el-row>
                        <el-col :span="24">
                            <div class="tab">
                                <div class="left"></div> 基础信息
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="设备ID" prop="Id">
                                <el-input v-model="deviceFrom.Id" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="设备用途" prop="purpose">
                                <el-input v-model="deviceFrom.purpose" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="submitForm">确 定</el-button>
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </template>
            </el-drawer>

CSS

/* 选择抽屉标题的类，并添加下划线 */
:deep(.el-drawer__header) {
    border-bottom: 1px solid #e5e5e5 !important;
    margin-bottom: 0;
    padding-bottom: var(--el-drawer-padding-primary) !important;
}