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

快来打我* 2022-12-11 07:59 140阅读 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 条评论，140人围观）

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

相关阅读

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

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

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

相关 Tabs 标签页

![在这里插入图片描述][5daa8017173d4819b65bdd2ef45d3c9b.png] <template> <div id="contaion

Love The Way You Lie/ 2024年02月05日 20:14/ 0 赞/ 42 阅读

相关 EasyUI中Tabs标签页的简单使用

场景效果 ![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

忘是亡心i/ 2023年10月18日 20:03/ 0 赞/ 4 阅读

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

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

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

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

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

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

相关 vue ElementUI Tabs 标签页的使用

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

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

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

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

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

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

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

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

相关 bootstrap标签页（tab）

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

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

相关 Navigation-Tabs标签页

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

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