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 小时前
🚓 分诊台与拆题术:让 RAG 学会判断和规划
前端·javascript
呃呃呃呃ex3 小时前
10. 现代前端工程化:ES6 React 项目实战与原理解析
前端·javascript
浪遏3 小时前
D2C 系统架构复盘:从设计稿到代码,我们踩过的坑和最终方案
前端·javascript·后端
farerboy3 小时前
WEB 项目如何禁用 F12 等功能
前端·vue.js·架构
Blanche15003 小时前
Webpack 构建流程解析
javascript·面试
parade岁月3 小时前
vtable-guild 被收录进 vuejs/awesome-vue 了 🎉
前端·vue.js
Flynt3 小时前
官方说一个破折号拖慢整段高亮,我在 Node 里验证了一遍:机制是真的,2.8 倍没跑出来
javascript·性能优化·v8
默_笙4 小时前
🚗 把小说装进数据库了:我的第一个 RAG,和它的五个硬伤
前端·javascript
像我这样帅的人丶你还4 小时前
📱iPhone Duo 开屏动画咋实现的?
javascript·webgl·three.js
Leslie1654 小时前
把 SQL 性能诊断接入模型 API:从谓词分析到可验证优化
javascript