vue table页展示

news2024/9/28 17:20:49
<template>
  <el-container>
    <el-header>
      <el-tabs
        v-model="groupId"
        @tab-click="tabChange"
        class="w-full pt-11 ml-5"
      >
        <el-tab-pane
          label="登记进度"
          name="0"

        ></el-tab-pane>
        <el-tab-pane
          label="注销进度"
          name="1"

        ></el-tab-pane>
      </el-tabs>
    </el-header>
    <el-main class="nopadding">
      <beDealtWith
        ref="beDealtWith"
        v-if="groupId == '0'"
      ></beDealtWith>
      <exceptionCompleted
        ref="exceptionCompleted"
        v-if="groupId == '1'"
      ></exceptionCompleted>
<!--      <div  v-if="groupId == '0'">1</div>-->
<!--      <div  v-if="groupId == '1'">2</div>-->
    </el-main>
  </el-container>


</template>

<script>
//引入对应的vue界面
import beDealtWith from "@/views/apply/index.vue"; //登记进度
import exceptionCompleted from "@/views/license/index.vue"; //注销进度
export default {
  name: "exceptionAbnormal",
  data() {
    return {
      groupId: "0",
    };
  },
  components: {
    beDealtWith,
    exceptionCompleted
  },
  methods: {
    //标签切换
    tabChange(prop) {
      this.groupId = prop.name;
    },
  },
};
</script>

<style></style>

效果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/636804.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MarkDown使用教程

MarkDown使用教程 1.标题 #: 一级标题 ##: 二级标题 ###: 三级标题 一共分为六级 2.字体 斜体文本 斜体文本 粗体文本 粗体文本 粗斜体文本 粗斜体文本 3.列表 无序号的使用*、、- 作为列表的标记&#xff0c;这些标记后面添加一个空格 第一项第二项第三项 第一项第二项…

ArcGIS如何统计面内点的数量

本文来源&#xff1a;GIS科研实验室公众号 1 数据来介绍 本次教程使用的数据为&#xff1a;各小区的点坐标&#xff08;来源房天下&#xff0c;坐标为CGCS2000&#xff09;&#xff1b;基础教育设施、商业服务设施、金融保险设施、医疗卫生设施的POI坐标&#xff08;来源高德…

java:找不到符号 符号:变量:log get set

问题&#xff1a;java&#xff1a;找不到符号&#xff1a;变量&#xff1a;log get set解决方法&#xff1a;在idea中&#xff0c;点击file-Settings&#xff0c;打开配置页面&#xff0c;如图红框位置&#xff0c;输入&#xff1a; -Djps.track.ap.dependenciesfalse

pyecharts案例四——动态GDP柱状图绘制

思路 for循环每一年的数据&#xff0c;基于每一年的数据&#xff0c;创建每一年的Bar对象&#xff0c;并且将该对象添加到时间线timeline中&#xff0c;最后设置自动播放并绘图 实现代码 from pyecharts.charts import Bar, Timeline from pyecharts.options import * from …

(7)自动调优

文章目录 前言 1 在自动调优模式下飞行前的设置 2 如何调用自动调优 3 在位置保持下调用自动调优 4 如果自动调优失败 5 补充说明 6 常见的问题 7 Dataflash日志记录 8 地面控制站消息 前言 AutoTune 试图自动调优稳定P&#xff0c;速率P和 D&#xff0c;以及最大旋转…

交流(直流)电流采集方案

芯片原理图 注意途中的绿色部分&#xff0c;说明此芯片可以采集交流或者直流 内部霍尔工作原理图 通过曲线可以确定再0A时输出电压为2.5v 只有随着电流的变化是大于2.5v或者小于2.5v&#xff08;交流负方向&#xff0c;或者直流负方向&#xff09; 下面是一个插排的拆解视频截…

9. ThreadLocal

9.1 ThreadLocal简介 9.1.1 面试题 ● ThreadLocal中ThreadLocalMap的数据结构和关系 ● ThreadLocal的key是弱引用&#xff0c;这是为什么&#xff1f; ● ThreadLocal内存泄漏问题你知道吗&#xff1f; ● ThreadLocal中最后为什么要加remove方法&#xff1f; 9.1.2 是什么&a…

KaiwuDB 受邀亮相山东省数字化转型论坛

4月21日&#xff0c;第十五届信博会暨中国&#xff08;济南&#xff09;数字经济高端峰会成功举办。KaiwuDB 受邀出席峰会重要论坛—山东省数字化转型论坛&#xff0c;并发表《工业物联网时代&#xff0c;数据库赋能企业数字化转型落地实践》主题演讲&#xff0c;与来自国内的 …

Java动态代理:优化静态代理模式的灵活解决方案

文章目录 代理模式定义具体实现分析优缺点 优化使用动态代理解决优化相关知识动态代理种类场景应用 代理模式 定义 代理模式&#xff0c;为其他对象提供一种代理以控制对这个对象的访问 具体实现 代理模式的具体实现描述可以分为以下几个步骤&#xff1a; 创建抽象对象接…

什么是Vue的JSX语法?如何使用JSX语法?

什么是Vue的JSX语法&#xff1f;如何使用JSX语法&#xff1f; 在Vue中&#xff0c;我们通常使用模板语法来编写组件的模板。但是&#xff0c;有些开发者更喜欢使用类似于React的JSX语法来编写组件。Vue也支持使用JSX语法来编写组件&#xff0c;本文将介绍什么是Vue的JSX语法以…

企业级信息系统开发讲课笔记4.7 Spring Boot整合JPA

文章目录 零、学习目标一、Spring Data JPA概述1、Spring Data JPA简介2、Spring Data JPA基本使用3、使用Spring Data JPA进行数据操作的多种实现方式4、自定义Repository接口中的Transactional注解5、变更操作&#xff0c;要配合使用Query与Modify注解 二、Spring Boot整合JP…

热门图表软件推荐,哪款更功能更强大?

在如今的数据化时代&#xff0c;各种企业都需要有一套高效的报表制作工具。而图表是报表中最常用、也是最重要的一部分&#xff0c;因此选择一款优秀的图表软件显得尤为重要。本文将为大家介绍5款热门图表软件&#xff0c;并突出介绍VeryReport图表软件的优势。 1. VeryReport…

NetApp 全闪存 ASA 系统可为您的任务关键型企业级应用程序、数据库和 VMware 基础架构提供简单专用的块存储

NetApp ASA&#xff1a;全闪存 SAN 阵列 在性能和效率之间进行艰难抉择的时代已经过去。NetApp ASA 系统提供简单专用的块存储&#xff0c;具有卓越的性能、高可用性和领先的效率 — 无需权衡取舍。 为什么选择适用于 SAN 的 NetApp ASA 系统&#xff1f; 简单的 SAN 存储&…

DCL单例及synchrosized问题

疑问待解&#xff1a; 1 synchronized代码块执行完后&#xff0c;在没有return INSTANCE之前&#xff0c;其他线程是否可见这个对象&#xff08;因为synchronized出块后会把工作内存写到主存&#xff09;&#xff1f; 如果可见&#xff0c;那么return的作用是不是可有可无&…

object类型(equals、hashCode、getClass、getName)

equals方法的改写 Override//重写equals方法&#xff0c;重写方法后对比的属性值&#xff08;没有重写前对比的是属性值&#xff09;public boolean equals(Object obj) {Students s (Students) obj;return this.name.equals(s.name) && this.age s.age;}public clas…

学顶教育:中级统计师单科成绩计算方式分享!

中级统计师的成绩管理是非滚动式的&#xff0c;所以需要考生一次考下两个科目&#xff0c;两个科目都合格之后&#xff0c;才能取得证书。 中级统计师的考试&#xff0c;是每年举行一次&#xff0c;全部考试科目合格者&#xff0c;授予由人事部统一印制、全国范围内有效的《统…

从结构上浅谈FPGA LCMXO2-4000HC-6BG256I 实现逻辑的基本原理

LCMXO2-4000HC-6BG256I lattice莱迪思深力科 MachXO2 可编程逻辑器件 (PLD) 由六个超低功耗、即时启动、非易失性 PLD 组成&#xff0c;可提供 256 至 6864 个查找表 (LUT) 的密度。 MachXO2 系列 PLD 提供多种特性&#xff0c;例如嵌入式块 RAM (EBR)、分布式 RAM 和用户闪存 …

叽里呱啦 Nacos 1.1.4 升级 1.4.1 最佳实践

博主介绍&#xff1a;✌全网粉丝4W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战、定制、远程&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面…

VTK学习之读取图片,vtkImageViewer2的使用

一、vtk中的vtkImageData VTK提供相对应的类对图像文件进行读写操作 测试下效果&#xff1a; int main() {//vtkSmartPointer<vtkBMPReader> reader vtkSmartPointer<vtkBMPReader>::New();//reader->SetFileName("**\\12.bmp");vtkSmartPointer&l…

【分享】Heic图片如何批量转换成jpg格式?

我们知道&#xff0c;Heic是苹果产品的专属图片格式&#xff0c;但不是所有Windows系统都可以查看&#xff0c;而且很多需要上传图片的平台也不支持Heic格式&#xff0c;这些情况就需要把Heic转换成JPG等常用的图片格式。 如果图片数量非常多&#xff0c;要如何实现批量转换呢…