当前位置: 首页 > article >正文

v-if和:visible.sync

<!-- 弹出详情对话框 -->
    <el-dialog :title="title" :visible.sync="dialogOpenOffline" width="900px" append-to-body>
      <el-radio v-model="radio" label="1">从系统数据筛选</el-radio>
      <el-radio v-model="radio" label="2">上传离线文件</el-radio>
      <el-form class="dialog-jianxi" v-if="radio === '1'" :model="queryParams" ref="" size="small" :inline="true"
        v-show="showSearch" label-width="68px">
        <el-form-item label="设备编号" prop="status">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in selectoptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型" prop="status">
          <el-select v-model="value" placeholder="请选择数据类型">
            <el-option v-for="item in selectoptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间" prop="postCode">
          <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <el-upload v-if="radio === '2'" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
        :on-exceed="handleExceed" :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传csv文件,且不超过500MB</div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

1.弹窗显示与否, 使用:visible.sync="dialogOpenOffline"控制是否弹出显示

2.v-if通过radio单选框去隐藏和展示对应的元素


http://www.kler.cn/a/409470.html

相关文章:

  • Flutter:SlideTransition位移动画,Interval动画延迟
  • docker pull命令拉取镜像失败的解决方案
  • 汽车HiL测试:利用TS-GNSS模拟器掌握硬件性能的仿真艺术
  • Java中的File和IO流
  • 大语言模型---Llama7B和Llama8B的区别;模型参数量;权重文件的不同;嵌入层权重的不同;输入序列长度的不同;应用场景
  • HarmonyOs鸿蒙开发实战(20)=>一文学会基础使用组件导航Navigation
  • 第144场双周赛题解:两个字符串得切换距离
  • Dubbo Golang快速开发Rpc服务
  • 详解Oracle表的类型(二)
  • springboot集成shiro和前后端分离配置
  • matlab 反距离插值 IDW
  • 【系统架构设计师】真题论文: 论非功能性需求对企业应用架构设计的影响(包括解题思路和素材)
  • 基于YOLOv8深度学习的智慧交通事故检测系统研究与实现(PyQt5界面+数据集+训练代码)
  • jdk8特性:CompletableFuture的使用
  • 小R的随机播放顺序
  • 论文 | Recitation-Augmented Language Models
  • 6.STM32之通信接口《精讲》之USART通信(PC串口与OLED交互)---多字节数据收发(数据包的模式:HEX数据包和文本数据包)
  • 五天SpringCloud计划——DAY1之mybatis-plus的使用
  • SpringBoot3中的性能提升介绍
  • Linux上安装单机版ElasticSearch6.8.1
  • 设计模式之创建模式篇
  • 签到送金币项目
  • 集合Queue、Deque、LinkedList、ArrayDeque、PriorityQueue详解
  • FastAPI和SQLModel结合的优点
  • 拉格朗日乘子(Lagrange Multiplier)是数学分析中用于解决带有约束条件的优化问题的一种重要方法,特别是SVM
  • selenium grid 远程webdriver添加上网代理