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单选框去隐藏和展示对应的元素

相关推荐
互联网搬砖老肖3 小时前
Selenium2+Python自动化:利用JS解决click失效问题
javascript·python·自动化
pink大呲花4 小时前
使用 Axios 进行 API 请求与接口封装:打造高效稳定的前端数据交互
前端·vue.js·交互
samuel9184 小时前
uniapp通过uni.addInterceptor实现路由拦截
前端·javascript·uni-app
泯泷4 小时前
JavaScript随机数生成技术实践 | 为什么Math.random不是安全的随机算法?
前端·javascript·安全
八了个戒5 小时前
「数据可视化 D3系列」入门第八章:动画效果详解(让图表动起来)
开发语言·前端·javascript·数据可视化
八了个戒5 小时前
「数据可视化 D3系列」入门第九章:交互式操作详解
javascript·信息可视化·数据可视化·d3
拉不动的猪6 小时前
无缝适配 PC 和移动端‌我们要注意哪些点呢
前端·javascript·面试
爱看书的小沐7 小时前
【小沐杂货铺】基于Three.JS绘制卫星轨迹Satellite(GIS 、WebGL、vue、react,提供全部源代码)
javascript·vue.js·webgl·three.js·卫星轨道·地球earth·satellite
王富贵的记录8 小时前
React 函数组件和类组件的区别
前端·javascript·react.js
巴巴_羊8 小时前
React Article模块
javascript·react.js·ecmascript