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