5. 测试和调整样式 最后,你需要测试设置后的 el-dialog 高度是否满足要求。你可以通过打开对话框并检查其高度和布局来验证设置是否成功。如果高度不符合预期,你可能需要调整 CSS 样式或 Vue 的逻辑来解决问题。 通过以上步骤,你应该能够成功地为 el-dialog 设置一个固定的高度,并处理内容超出固定高度的情况。
1 第一步，为了方便例子说明，我们创建一个使用element-ui为框架的vue项目，不会的请按下面经验操作。详细如下图 2 第二步，我们前往element-ui官网查看el-dialog 的使用方法。详细如下图 3 第三步，复制步骤二的的例子代码，放入到我们的项目中，放到src-components-HelloWorld.vue文件中。详细如下图 4 第四步...
1.先给弹框dialog设置一个定位 2.给里面的dg-table+el-table设置定位 (可能有冗余代码,但是目前弄出来就行了) <style lang="less" scoped> .dialogBox { height: 100% !important; overflow: hidden !important; display: flex; flex-direction: column; } .dialog-content { flex: 1; // width: 100%...
滚动条本身就是因为盒子固定高度, 内容超出盒子, 为了方便查看未出现的, 如果不固定高度overflow: auto等是不会生效的的.根据你的需要可以这样做, 在钩子函数mouted中获取当前屏幕的可视区域高度, 根据自己的需要减去一些然后将这高度height设为最大高度: max-height: height就可以既做到自适应高度又做到超出屏幕 有...
* 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。 */ // v-dialogDrag: 弹窗拖拽+水平方向伸缩 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { //弹框可拉伸最小宽高 let minWidth = 400; ...
<el-dialog:visible.sync="dialogVisible":show-close='false'width="75%"top="20vh":destroy-on-close='true':close-on-click-modal='false':close-on-press-escape='false'><divclass="el-dialog-div"></div></el-dialog> /deep/.el-dialog__header{display:none;}/deep/.el-dialog.el-dialog__...
vue element-ui .el-dialog 限制高度 <style scoped> /deep/ .el-dialog { height: 78vh; overflow: auto; } </style>
之前项目里有用到elementUI的弹窗的,总是自动超出隐藏然后滚动条,刚开始不知道怎么处理,都是自己新写一个弹窗使用,其实是有解决方法的,只是当时没找到: 依照elementUI文档给dialog添加了 custom-class 之后利用 ::v-deep 穿透,在css中添加以下代码就能实现高度超出了:...
直接加 !important 无效 但是 /deep/ 就OK了 /deep/ .el-dialog{ height: 3.22917rem ; }
```html <el-dialog title="提示" :visible.sync="dialogVisible" :height="300"> <!--设置对话框高度为300px --> <p>这是一段内容</p> </el-dialog> ``` 在这个例子中,我们将对话框的高度设置为`300px`。你也可以使用其他单位,比如`rem`、`em`或者百分比等。©...