element Dialog子组件弹框

2023-11-01

//父组件
<div> 
  <tipDialog :DialogTipShow="DialogTipShow" @closeDialog="closeDialog"></tipDialog>
</div>
import tipDialog from '../components/tipDialog'
 export default {
  components: {
      tipDialog
    },
 data() {
   return {
     DialogTipShow:false
   }
},
methods: {
closeDialog() {
   this.DialogTipShow = false
   }
}
//子组件
<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="DialogTip"
      width="30%"
      center
    >
     <div>
         <span>按照GB50014-2006《室外排水设计规范》,重力流污水管道应按非满流计算,其最大设计充满度, 应按下表取值:</span>
         <table class="formData"  width="100%" border="0" cellspacing="2" cellpadding="0">
         <tr collspan="2" rowspan="2">
             <td >管径或渠高(mm)</td>
             <td>最大设计充满度</td>
         </tr>
          <tr>
             <td>200-300</td>
             <td>0.55</td>
         </tr>
          <tr>
             <td>350-450</td>
             <td>0.65</td>
         </tr>
          <tr>
             <td>500-900</td>
             <td>0.70</td>
         </tr>
          <tr>
             <td>1000</td>
             <td>0.75</td>
         </tr>
         </table>
         <span>超过最大设计充满度(简称超载)说明管道内部承受额外水压,影响管道寿命,超载管段长度是发生超载管段的里程累加</span>
     </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()" size="mini">取 消</el-button>
        <el-button type="primary" @click="closeDialog()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'tipDialog',
    props: {
      DialogTipShow: Boolean
    },
    data() {
      return {
        DialogTip: false
      }
    },
    watch: {
      DialogTipShow(val) {
        this.DialogTip = val
      },
      deep: true
    },
    methods: {
      closeDialog() {
        this.DialogTip = false
        this.$emit('closeDialog', false)
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-dialog__header{
    display: none !important;
}
.formData{
      border-collapse: collapse;
      margin:10px 0 ;
    tr{
           text-align: center;
        td{
            border: 1px solid #CFCFCF;
            text-align: center;
        }
    }
}
.el-icon-question:before{
   color: #D8D8D8 !important;
}
</style>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element Dialog子组件弹框 的相关文章

  • 仅使用页面数据通过 Javascript 触发浏览器的“另存为”对话框

    作为页面输出的一部分 我在文本区域中包含了数据表的 CSV 格式版本 以便用户可以轻松地将 CSV 导出复制 粘贴到他们选择的电子表格中 我想要一种方法 有一个按钮 当单击该按钮时 将触发 另存为 对话框 该对话框将下载页面文本区域中已存在
  • 在Java中一次向ArrayList添加多个项目[重复]

    这个问题在这里已经有答案了 如何一次向 ArrayList 添加多个项目 ArrayList
  • Windows 批处理脚本中的文件/文件夹选择器对话框

    在运行时才知道输入文件位置的情况下 使用 GUI 进行文件选择输入可以减少用户出错的可能性 有没有办法从 Windows 批处理脚本调用文件 文件夹选择器对话框 文件浏览器 2016 3 20更新 由于 PowerShell 是当今所有现代
  • 运行时更改进度对话框消息

    我有一个相当简单的问题 我不知道如何解决 我想在进度对话框运行和显示时更改其消息文本 一个例子是 剩余时间 计数器 它会在进度动画旋转时进行倒计时 我不确定如何解决这个问题 因为即使在正在运行的线程中执行progressDialog set
  • Shadowbox - 如何切换或替换内容?如何关闭和打开另一个对话框?

    我尝试在多种场合使用 Shadowbox 有时我碰巧同时需要多个对话框 在这个简单的示例中 我尝试关闭一个现有窗口并重新打开另一个窗口 但没有打开第二个窗口 我做错了什么
  • Android 对话框宽度

    我似乎无法控制对话框宽度 我有一个像这样的简单布局
  • 如何通过xpath获取元素的索引?

    我有下一个结构 div div class column aaa div div class column bbb div div class column jjj div div 我想知道是否有一种方法可以使用 XPath 并编写一些查询
  • 对话框中标题分隔符的样式

    我想知道如何摆脱 或更改颜色 对话框中的标题分隔符 它是蜂窝设备上显示的对话框标题下方的一条蓝线 我猜这是 SDK 中的相关布局 但由于没有样式属性 我不知道如何设置它的样式 如果我尝试使用 findViewById 则没有 android
  • Delphi 在保存对话框中覆盖现有文件

    我正在使用 TSaveDialog 组件通过单击按钮来保存文件 但是 我在保存现有文件名时遇到问题 通常 当您想要在 Windows 中保存现有文件时 会弹出一个消息框 询问您是否确实要覆盖该文件 TSaveDialog 组件的情况并非如此
  • 如何在对话框和活动之间传递值?

    我要求用户通过对话框输入 package com android cancertrials import android app Dialog import android content Context import android os
  • jquery遍历新创建的元素

    我正在尝试在表中添加新行 并将它们保存到数据库中 首先 我使用 append 在表中追加行 tablename append tr td newly added row td tr 附加功能运行良好 我的页面显示了正确的结果 但是 我无法选
  • 如何将图标放入自定义对话框的标题中

    我想将一个可绘制对象放入对话框标题栏中 我尝试了以下方法 final Dialog dialog new Dialog this dialog requestWindowFeature Window FEATURE LEFT ICON di
  • 在Vue.js中,如何选择组件的节点元素? $refs 可能吗?

    因为我想选择组件的节点元素 所以我想也许我可以使用 refs Parent
  • 设置默认 JavaFX 对话框的样式

    我正在寻找一种方法来设置默认 JavaFX 对话框的样式 javafx scene control Dialog 我尝试获取 DialogPane 并添加样式表 但它只覆盖了对话框的一小部分 我更喜欢仅使用外部 css 文件设置样式 而不在
  • CKEditor 3.x - 动态添加 UI 元素到插件对话框

    我正在构建一个 CKEditor 3 x 插件 它允许通过与我们的后端系统绑定的单独查看器应用程序有条件地显示 HTML 的某些部分 我的 CKEditor 插件将用于定义这些条件 但我对如何动态地将 UI 元素添加到插件对话框感到困惑 在
  • Bootstrap 模态对话框,show.bs.modal 事件相关Target 未定义。我怎样才能获得被点击的元素?

    按钮调用模式对话框 单击按钮时 会触发事件 结果事件引用 e latedTarget 未定义 那么 如何从处理程序中获取调用按钮呢 e 似乎不包含任何对调用按钮的引用
  • 计算数组元素的出现次数/频率

    在 Javascript 中 我试图获取一个初始的数值数组并计算其中的元素 理想情况下 结果将是两个新数组 第一个指定每个唯一元素 第二个包含每个元素出现的次数 不过 我愿意接受有关输出格式的建议 例如 如果初始数组是 5 5 5 2 2
  • 如何在ngDialog中加载数据

    我有一个要求 我需要从 jsp 页面打开一个对话框 并且在打开该对话框时 我需要从服务器加载一些预填充的数据 使用 AJAX 调用 如果我在打开对话框之前进行 AJAX 调用 我会获取数据 但对话框会像新页面一样加载 如果我尝试在新控制器中
  • 我无法在 Android 中使用 setMultiChoiceItems 在对话框中显示列表

    我有一个方法返回 CharSequence 并且不为空 用日志检查 但不显示在对话框中 我必须初始化 boolean 数组吗 我没有看到任何错误 所以也许我错过了一些东西 我的代码是 dbManager open final CharSeq
  • Android:使 Dialog 周围的所有内容都比默认值更暗

    我有一个具有以下样式的自定义对话框 它显示了一个无边框对话框 后面的任何内容都会 稍微 变暗 我的设计师希望背后的一切都比 Android 的默认设置更暗 但不是完全黑色 有这样的设置吗 我能想到的唯一解决方法是使用全屏活动而不是对话框 只

随机推荐

  • When allowCredentials is true, allowedOrigins cannot contain the special value “*“ since that cannot

    最近新写springboot 配置跨域配置文件后出现的问题 org springframework web util NestedServletException Request processing failed nested excep
  • 一证通查查询名下互联网账户

    全国互联网账户 一证通查 来啦 核验身份后一键在线查询名下所有关联号码以及注册 名下电话卡查询 https tb3 cn A6zcU6手机号绑定查询 https tb3 cn A3lhMk
  • Vue3.0脚手架安装项目(通过命令行)

    Vue3 0通过命令行来创建Vue脚手架项目 1 先安装node js https nodejs org en download 自行安装 查看node jsb版本 node version 2 全局安装脚手架 npm install g
  • 智能信息处理专业是干嘛的?

    摘要 主要是介绍智能信息处理专业是干嘛的 包括其定义 涉及的领域 学习的内容和算法 发展趋势 工作前景和相关学习资料 def 使用各种智能手段进行信息交换的过程 其中智能信手段包括人工智能 机器智能 计算机智能等技术 所涉及学科 智能信息处
  • linux中感叹号的作用,Linux - 感叹号

    在Linux命令行下令人惊叹的惊叹号 符号在 Linux 中不但可以用作否定符号 还可以用来从历史命令记录中取出命令或不加修改的执行之前运行的命令 下面的所有命令都已经在 Bash Shell 中经过确切地检验 尽管我没有试过 但大多都不能
  • STM32--基本定时器&&通用定时器

    1 定时器概述 定时器分为基本定时器 通用定时器 高级定时器 例如 STM32F10x系列包含4个通用定时器 TIM2 TIM5但是STM32F103Rx系列只有3个通用定时器 TIM2 TIM4 这些通用定时器是完全独立的 不共享任何资源
  • 上传、下载huggingface仓库文件(模型、数据等)

    下载 例如 想要从huggingface hub下载llama 13b模型文件到本地 可以用如下命令 local dir就是你想要下载到的本地文件夹 from huggingface hub import snapshot download
  • MySQl的基本操作

    前言 MySQL是一种关联数据库管理系统 由于其体积小 速度快的特点 数据库CURD 他和前面的oracel的使用方法差不多 这里就不过多叙述 大概记录一下 创建数据库 创建一个名称为mydb1的数据库 默认为latin1 create d
  • Java-用户自定义异常

    Java 用户自定义异常 1 如何自定义异常 继承现有的异常父类 RuntimeException Exception 提供全局常量 serialVersionUID 提供重载的构造器 2 code举例 定义 package p8excep
  • 使用github生成在线前端项目链接

    作为一个前端小白 一开始是想面试的时候可以让HR直观地看到我的前端项目 然后就在网上找方法可以怎么解决我的这个需求 直至昨天 参考各位大佬的笔记和博客 断断续续 摸索了好几天 总算有个自己的网址 看到的方法大致如下 一 使用花生壳软件进行远
  • H5网页跳转打开微信小程序详解(含完整代码)

    限制条件 目前仅支持在微信内打开H5页面 已认证的服务号 服务号绑定 JS接口安全域名 下的网页可使用此标签跳转任意合法合规的小程序 已认证的非个人主体的小程序 使用小程序云开发的静态网页托管绑定的域名下的网页 可以使用此标签跳转任意合法合
  • csharp: Export DataSet into Excel and import all the Excel sheets to DataSet

  • 红帽Redhat—使用VMware Workstation 16 Pro 安装RHEL8.3登陆

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 一 环境工具准备 二 VMware Workstation 16 Pro虚拟机创建步骤 三 安装RHEL8 3系统操作步骤 四 操作系统的管理方式 五 SSH远程登
  • [java] mvn 使用笔记

    设置版本号 mvn versions set mvn versions commit
  • C语言结构体

    一 结构体的定义 结构体 Struct 是C语言中的一个重要数据类型 它可以用来存储多个不同类型的变量 结构体类似于一个自定义的数据类型 可以包含多个不同类型的成员变量 每个成员变量可以有自己的数据类型和值 二 结构体存储数据方式 结构体存
  • windows10在资源管理器下右键文件出现无响应解决方案

    1 下载右键菜单管理工具 使用二分查找找到产生问题的原因 我这里是因为qingshellext Class 禁用以后就没有问题了
  • 数组的转置和轴对称(python)

    文章目录 TOC 文章目录 1 什么叫轴 2 什么叫转置 3 转置 3 1简单转置 像二位数组 只有两个轴 再怎么转置也只是两个轴进行位置交换 所以 直接使用T就可以了 例如 3 2transpose 方法进行转置 3 3swapaxes
  • Android SQLite 数据库 存取 BLOB 二进制 文件

    Android开发时用到二进制数据 也可以理解为BYTE数组 的SQLite存取 可能会有人对存取如mp3 图片类文件困惑 其实p3 图片类文件读到内存就可理解为BYTE数组 只要在 下面的基础上增加将文件读到BYTE数组就可以了 其他操作
  • python设置下载源

    我们一般直接用pip下载三方包会很慢 设置以下命令可以加速下载 pip config set global index url Simple Index pip3 9 config set global index url Simple I
  • element Dialog子组件弹框

    父组件 div div