首页 > 其他分享 >vue3 设置el-dialog height超过滚动条

vue3 设置el-dialog height超过滚动条

时间:2024-04-01 19:11:41浏览次数:17  
标签:el overflowY height 滚动条 init dialog cssContent

 

方法一:

<style scoped>
 ::v-deep .el-dialog .el-dialog-body{
    height: 500px;
    overflow-y: auto;
 }
</style>

 

如果要设置动态的高度话,则要在setup里面设置

 

<script >
  export default defineComponent({
    setup:{
        const cssContent=ref({height:'100%',overflowY:''})
        const init=()=>{
            cssContent.value.height='500px'
            cssContent.value.overflowY='auto'
        }
        init()
        return {
            cssContent,
            init
        }
    }
  })
</script>
<style scoped>
 ::v-deep .el-dialog .el-dialog-body{
    height: v-bind('cssContent.height');
    overflow-y: v-bind('cssContent.overflowY');
 }
</style>

 

标签:el,overflowY,height,滚动条,init,dialog,cssContent
From: https://www.cnblogs.com/zhian/p/18109182

相关文章

  • 论文阅读:A new approach solve the multi-product multi-period inventory lot sizing
    论文:Anewapproachsolvethemulti-productmulti-periodinventorylotsizingwithsupplierselectionproblem期刊:Computer&OperationsResearch1.模型建立:具有供应商选择问题的多产品多周期库存批量确定1.1问题定义将具有供应商选择问题的多产品多周期库存批......
  • Linux中shell脚本的初步认识之变量相关操作
    4月1日shell脚本一shell基本语法1变量1)系统变量:不要用户定义的就可以直接使用的变量常用的系统变量如下:$HOME$PWD$SHELL$USERecho$HOMEecho$PWDecho$SHELLecho$USER#echo查看系统变量值2)局部变量:由用户定义的变量,仅在当前shell或shell脚本中有效va......
  • 使用Element-UI的form表单验证文件是否上传
    项目中有个需求,表单中的文件为必传项。 其中使用了element-ui的form表单验证,话不多说,上代码。<template><div><el-formlabel-position="top":model="reportForm"ref="checkerForm":rules="rules"label-......
  • 浅看BCEL字节码
    什么是BCELBCEL是位于sun包下的一个项目,是属于ApacheCommon的一个子项目BCEL-LoadClass分析demopackageorg.example;importcom.sun.org.apache.bcel.internal.Repository;importcom.sun.org.apache.bcel.internal.classfile.JavaClass;importcom.sun.org.apache.bcel......
  • Electron跨平台技术概要分析
    Electron是什么?Electron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。官网:https://www.electronjs.org/嵌入 Chromium 和 Node.js 到二进制的Electron允许您保持一个JavaScript代码代码库并创建在Windows上运行的跨平台应用macOS和Linux——不需要......
  • JMeter前置处理器-Beanshell前置处理器详解
    前言在JMeter中,前置处理器用于在发送HTTP请求之前执行特定的操作。Beanshell前置处理器是一种非常强大的前置处理器,它允许您使用Java语言编写脚本来实现各种复杂的逻辑。本文将介绍如何使用Beanshell前置处理器来执行自定义操作以增强性能测试。什么是Beanshell前置处理器?Bean......
  • Xshell连接不上Ubuntu
    1ubuntu安装ssh服务器sudoaptinstallopenssh-server修改配置文件vi/etc/ssh/sshd_config修改如下两个配置修改完运行下面代码。再用xhell连接试试。/etc/init.d/sshrestart......
  • 洛谷P3543 [POI2012] WYR-Leveling Ground
    题目描述给定\(n\)个数和\(a,b\)每次可以选择一段区间\(+a,-a,+b,或-b\),问最少操作几次能把它们都变成\(0\)。如果无解请输出\(-1\)。样例输入5231211-15分析对于区间修改是很麻烦的,为了简化复杂度,这里可以将数组转化为差分数组以降低难度,对于每一个数,我......
  • Mysql select 、update运行超时解决方案
    Mysqlupdate运行超时解决方案问题描述:执行update时,发现时间很长,而且会失败;步骤:1、在数据库执行:UPDATEplaySET skip =skip+500,run=5.50,jump_times=jump_times+1WHEREid=388;结果报错:ErrorCode:1205.Lockwaittimeoutexceeded;tryrestartingtransaction......
  • EL虚拟化表格 用h函数自定义表头并且指定插槽
    第一次使用el-table-v2,需要实现点击表头弹框来展示数据,官方文档中只有tsx的写法,没有使用h函数的写法,因此记录一下先看下最终的效果以下是部分代码import{ElButton,ElRadio,ElTooltip,ElPopover }from'element-plus'; //columns是一个数组,里面的值为每一列的配置......