Tabs 标签页使用子组件展示页面的基本实现

快来打我* 2022-12-11 07:59 134阅读 0赞

1：文件位置

![20200929163115610.png][]

2：页面代码

<template>
      <div class="app-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="工厂布局" name="first">
            <plant-layout />
          </el-tab-pane>
          <el-tab-pane label="设备实时监控" name="second">
            <equip-monitor />
          </el-tab-pane>
          <el-tab-pane label="管理大屏" name="third">
            <manage-screen />
          </el-tab-pane>
          <el-tab-pane label="订单进度监控" name="fourth">
            <order-monitor />
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    
    <script>
    import plantLayout from "./plantLayout";
    import equipMonitor from "./equipMonitor";
    import manageScreen from "./manageScreen";
    import orderMonitor from "./orderMonitor";
    
    export default {
      name: "produceMonitor",
      components: {
        plantLayout,
        equipMonitor,
        manageScreen,
        orderMonitor,
      },
      data() {
        return {
          activeName: "first",
        };
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    </style>

3：注意

template or render function not defined

意思是此页面没有页面结构，加一层template就好了

![20200929163307246.png][]

[20200929163115610.png]: /images/20221123/5494ec32faca48f6afdc77a032800b42.png
[20200929163307246.png]: /images/20221123/b54aa4b06dc44497903e26e100d14f6a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，134人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 动态组件实现Tabs标签切换组件

拿作为案例，它的tabs标签有很多，如：推荐、小说、儿童等等。用户点击小说就会切换到小说组件，如果仔细看第一次是有一个加载的过程，如果你再返回到推荐页，再次点击小说时就没...

痛定思痛。/ 2024年04月22日 15:07/ 0 赞/ 84 阅读

相关 Tabs 标签页使用子组件展示页面的基本实现

1：文件位置 ![20200929163115610.png][] 2：页面代码 <template> <div class="app-contai

快来打我*/ 2022年12月11日 07:59/ 0 赞/ 135 阅读

相关 idea关闭tab标签页返回上次打开的页面

由于之前使用eclipse的习惯，在当前A页面按住ctrl跳转到另一个java文件(B页面)，再关闭B页面就会回到A页面。但是idea默认的不是这样的，默认的总是关闭页面之

绝地灬酷狼/ 2022年11月21日 03:59/ 0 赞/ 363 阅读

相关 vue ElementUI Tabs 标签页的使用

先在前面附上官网链接 > [ElementUI Tabs 标签页][ElementUI Tabs] 下面是自己写的实际应用在每个tab页嵌套一个form表单，设

叁歲伎倆/ 2022年11月20日 08:14/ 0 赞/ 906 阅读

相关 ElementUI修改el-tabs标签页组件样式

官方示例：[https://element.eleme.cn/\/zh-CN/component/tabs][https_element.eleme.cn_zh-CN_comp

╰+哭是因爲堅強的太久メ/ 2022年09月04日 00:51/ 0 赞/ 1332 阅读

相关 js和jquery分别实现tab标签页

首先列出样式和html标签 <style type="text/css"> {margin: 0;padding: 0;}

客官°小女子只卖身不卖艺/ 2022年08月12日 05:58/ 0 赞/ 200 阅读

相关用 vue-router 实现 tab 标签页（单页面）

vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-r

迈不过友情╰/ 2022年06月07日 09:29/ 0 赞/ 290 阅读

相关 bootstrap标签页（tab）

Bootstrap 标签页（Tab）插件标签页（Tab）在 [Bootstrap 导航元素][Bootstrap] 一章中介绍过。通过结合一些 data 属性，您可以轻

r囧r小猫/ 2022年05月31日 04:23/ 0 赞/ 310 阅读

相关 Navigation-Tabs标签页

Tabs 标签页:分隔内容上有关联但属于不同类别的数据集合。 1、基本使用 Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value（v-model

亦凉/ 2022年03月30日 03:27/ 0 赞/ 343 阅读

相关浅析Bootstrap中Tab（标签页）的使用方法

Bootstrap 导航元素使用相同的标记和基类，改变修饰的`class`，可以在不同的样式间进行切换如"`.nav-pills`"（胶囊式导航）与 “`.nav-tab

雨点打透心脏的1/2处/ 2021年06月26日 16:06/ 0 赞/ 495 阅读