VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据

最新推荐文章于 2025-03-13 23:30:50 发布
最新推荐文章于 2025-03-13 23:30:50 发布
阅读量2.2w 收藏 168
点赞数 39
分类专栏： Element VUE 文章标签： el-tabs el-table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rear0312/article/details/108713680
版权
本文介绍如何在Vue项目中实现Tab内容动态加载，避免页面加载时因同时加载多个数据导致卡顿。采用v-if控制Tab组件的显示隐藏，利用Tab切换事件触发数据请求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

实战场景描述

实际开发过程中，需要Tab切换不同类型的数据，如果是每个Tab表单是静态数据还好，但通常情况下基本上涉及的都是table数据，页面打开时，我们看到的是一个打开的Tab内容，但其实vue是把所有的内容都渲染了，只是其他都隐藏了，这种可能就会造成打开页面时因为需要同时加载多个数据而卡顿，最佳实现思路肯定是Tab切换时才进行实时加载。

1、确定好每个Tab内容

参考官网的例子改成我们的内容就好

2、Tab切换事件

今天的列子每个tab都涉及表格，为了方便后期维护和切换刷新，把每个Tab内容都单独抽离成一个组件，并且用v-if控制显示隐藏。这个操作在Tab点击切换时进行设置即可。

 

3、完整代码

主页面：

<template>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" >
        <!-------------------------------------------------------->
        <el-tab-pane label="待审核" name="audit">
            <AuditList  v-if="activeName == 'audit'" ref="audit"></AuditList>
        </el-tab-pane>
        <!-------------------------------------------------------->
        <el-tab-pane label="已通过" name="pass">
            <PassList v-if="activeName == 'pass'" ref="pass"></PassList></el-tab-pane>
        <!-------------------------------------------------------->
        <el-tab-pane label="已否决" name="noPass">
            <NoPassList v-if="activeName == 'noPass'" ref="noPass"></NoPassList>
        </el-tab-pane>
        <!-------------------------------------------------------->
        <el-tab-pane label="已忽略" name="ignore">
            <IgnoreList v-if="activeName == 'ignore'" ref="ignore"></IgnoreList>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
  import PassList from "./PassList2";
  import NoPassList from "./NoPassList2";
  import IgnoreList from "./IgnoreList2";
  import AuditList from "./AuditList2";
  export default {
    name: "TEMPLATE",
    components: {
      PassList,
      NoPassList,
      IgnoreList,
      AuditList
    },
    data(){
      return {
        activeName: 'audit'
      };
    },
    mounted(){
      this.onQuery();
    },
    methods:{
      handleClick(tab, event) {
        this.activeName = tab.name;
        var that = this;
        setTimeout(function(){
            that.onQuery();
        },500);
      },
      
      onQuery() {
        this.$refs[this.activeName].getList();
      },

    }
  }
</script>

<style scoped>

</style>

已通过PassList2.vue：
<template>
   <div>
       <el-table
               :data="tableData"
               border
               stripe
               style="width: 100%">
           <el-table-column
                   label="序号"
                   align="center"
                   width="70px">
               <template slot-scope="scope">
                   {{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
               </template>
           </el-table-column>
           <el-table-column
                   label="人员姓名"
                   prop="pName">
           </el-table-column>
           <el-table-column
                   label="联系电话"
                   prop="phone">
           </el-table-column>
           <el-table-column
                   label="所在楼层"
                   prop="floor">
           </el-table-column>
           <el-table-column
                   label="房间编号"
                   prop="spaceNum">
           </el-table-column>
           <el-table-column
                   label="人员备注"
                   prop="notes">
           </el-table-column>
           <el-table-column
                   label="提交时间"
                   prop="submitTime">
           </el-table-column>
           <el-table-column
                   label="审核时间"
                   prop="auditTime">
           </el-table-column>
       </el-table>
       <el-pagination background
                      layout="total, prev, pager, next, sizes,jumper"
                      :page-sizes="[5, 10, 15]"
                      :page-size="formInline.pageSize"
                      :total="dataTotalCount"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange">
       </el-pagination>
   </div>
</template>

<script>
  export default {
    name: "PassList",
    data(){
      return {
        dataTotalCount: 0,      //查询条件的总数据量
        formInline: {
          currentPage: 1,
          pageSize:10,
        },
        tableData: [],
      }
    },
    methods:{

      //分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
      handleSizeChange: function(size) {
        this.formInline.pageSize = size;
        this.getList();
      },

      // 控制页面的切换
      handleCurrentChange: function(currentpage) {
        this.formInline.currentPage = currentpage;
        this.getList();
      },

      getList() {
        var that = this;
        that.axios.get('/dev-api/server/accessAudit/passList', {params:this.formInline})
          .then(function (response) {
            that.tableData = response.data.data.items;
            that.dataTotalCount = response.data.data.total;
          })
          .catch(function (error) {
            that.$message({
              type: 'error',
              message: '系统异常：'+error
            });
          });
      },

    }
  }
</script>

<style scoped>

</style>

 已否决列表NoPassList2.vue

<template>
   <div>
       <el-table
               :data="tableData"
               border
               stripe
               style="width: 100%">
           <el-table-column
                   label="序号"
                   align="center"
                   width="70px">
               <template slot-scope="scope">
                   {{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
               </template>
           </el-table-column>
           <el-table-column
                   label="人员姓名"
                   prop="pName">
           </el-table-column>
           <el-table-column
                   label="联系电话"
                   prop="phone">
           </el-table-column>
           <el-table-column
                   label="所在楼层"
                   prop="floor">
           </el-table-column>
           <el-table-column
                   label="房间编号"
                   prop="spaceNum">
           </el-table-column>
           <el-table-column
                   label="提交时间"
                   prop="submitTime">
           </el-table-column>
           <el-table-column
                   label="人员备注"
                   prop="notes">
           </el-table-column>
           <el-table-column
                   label="审核时间"
                   prop="auditTime">
           </el-table-column>
           <el-table-column
                   label="否决原因"
                   prop="reason">
           </el-table-column>
       </el-table>
       <el-pagination background
                      layout="total, prev, pager, next, sizes,jumper"
                      :page-sizes="[5, 10, 15]"
                      :page-size="formInline.pageSize"
                      :total="dataTotalCount"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange">
       </el-pagination>
   </div>
</template>

<script>
  export default {
    name: "NoPassList",
    data(){
      return {
        dataTotalCount: 0,      //查询条件的总数据量
        formInline: {
          currentPage: 1,
          pageSize:10,
        },
        tableData: [],
      }
    },
    methods:{

      //分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
      handleSizeChange: function(size) {
        this.formInline.pageSize = size;
        this.getList();
      },

      // 控制页面的切换
      handleCurrentChange: function(currentpage) {
        this.formInline.currentPage = currentpage;
        this.getList();
      },

      getList(data) {
        if(data){
          this.formInline.info = data.info;
          this.formInline.pType = data.pType;
          this.formInline.floor = data.floor;
        }

        var that = this;
        that.axios.get('/dev-api/server/accessAudit/noPassList', {params:this.formInline})
          .then(function (response) {
            that.tableData = response.data.data.items;
            that.dataTotalCount = response.data.data.total;
          })
          .catch(function (error) {
            that.$message({
              type: 'error',
              message: '系统异常：'+error
            });
          });
      },

    }
  }
</script>

<style scoped>

</style>

已忽略列表IgnoreList2.vue

<template>
   <div>
       <el-table
               :data="tableData"
               border
               stripe
               style="width: 100%">
           <el-table-column
                   label="序号"
                   align="center"
                   width="70px">
               <template slot-scope="scope">
                   {{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
               </template>
           </el-table-column>
           <el-table-column
                   label="人员姓名"
                   prop="pName">
           </el-table-column>
           <el-table-column
                   label="联系电话"
                   prop="phone">
           </el-table-column>
           <el-table-column
                   label="所在楼层"
                   prop="floor">
           </el-table-column>
           <el-table-column
                   label="房间编号"
                   prop="spaceNum">
           </el-table-column>
           <el-table-column
                   label="人员备注"
                   prop="notes">
           </el-table-column>
           <el-table-column
                   label="提交时间"
                   prop="submitTime">
           </el-table-column>
           <el-table-column
                   label="审核时间"
                   prop="auditTime">
           </el-table-column>
       </el-table>
       <el-pagination background
                      layout="total, prev, pager, next, sizes,jumper"
                      :page-sizes="[5, 10, 15]"
                      :page-size="formInline.pageSize"
                      :total="dataTotalCount"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange">
       </el-pagination>
   </div>
</template>

<script>
  export default {
    name: "IgnoreList",
    data(){
      return {
        dataTotalCount: 0,      //查询条件的总数据量
        formInline: {
          currentPage: 1,
          pageSize:10,
        },
        tableData: [],
      }
    },
    methods:{

      //分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
      handleSizeChange: function(size) {
        this.formInline.pageSize = size;
        this.getList();
      },

      // 控制页面的切换
      handleCurrentChange: function(currentpage) {
        this.formInline.currentPage = currentpage;
        this.getList();
      },

      getList(data) {
        if(data){
          this.formInline.info = data.info;
          this.formInline.pType = data.pType;
          this.formInline.floor = data.floor;
        }

        var that = this;
        that.axios.get('/dev-api/server/accessAudit/ignoreList', {params:this.formInline})
          .then(function (response) {
            that.tableData = response.data.data.items;
            that.dataTotalCount = response.data.data.total;
          })
          .catch(function (error) {
            that.$message({
              type: 'error',
              message: '系统异常：'+error
            });
          });
      },

    }
  }
</script>

<style scoped>

</style>

待审核列表AuditList2.vue

<template>
    <div>
        <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
            <el-table-column
                    align="center"
                    label="序号"
                    width="70px">
                <template slot-scope="scope">
                    {{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column
                    label="人员姓名"
                    prop="pName">
            </el-table-column>
            <el-table-column
                    label="联系电话"
                    prop="phone">
            </el-table-column>
            <el-table-column
                    label="所在楼层"
                    prop="floor">
            </el-table-column>
            <el-table-column
                    label="房间编号"
                    prop="spaceNum">
            </el-table-column>
            <el-table-column
                    label="认证图片"
                    prop="imgUrl">
            </el-table-column>
            <el-table-column
                    label="提交时间"
                    prop="submitTime">
            </el-table-column>
            <el-table-column
                    label="人员备注"
                    prop="notes">
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="300">
                <template slot-scope="scope">
                    <el-button icon="el-icon-s-claim" size="mini">通过</el-button>
                    <el-button icon="el-icon-s-release" size="mini">否决</el-button>
                    <el-button icon="el-icon-takeaway-box"  size="mini">忽略</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :page-size="formInline.pageSize"
                       :page-sizes="[5, 10, 15]"
                       :total="dataTotalCount"
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange"
                       background
                       layout="total, prev, pager, next, sizes,jumper">
        </el-pagination>
    </div>
</template>

<script>
  export default {
    name: "TEMPLATE",
    data() {
      return {
        dataTotalCount: 0,      //查询条件的总数据量
        formInline: {
          currentPage: 1,
          pageSize: 10,
        },
        tableData: [],
      }
    },
    methods: {
      //分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
      handleSizeChange: function (size) {
        this.formInline.pageSize = size;
        this.getList();
      },

      // 控制页面的切换
      handleCurrentChange: function (currentpage) {
        this.formInline.currentPage = currentpage;
        this.getList();
      },

      getList() {
        var that = this;
        that.axios.get('/dev-api/server/accessAudit/list', {params: that.formInline})
          .then(function (response) {
            that.tableData = response.data.data.items;
            that.dataTotalCount = response.data.data.total;
          })
          .catch(function (error) {
            that.$message({
              type: 'error',
              message: '系统异常：' + error
            });
          });
      }
    }
  }
</script>

<style scoped>

</style>

最终效果

注：表格中所有数据均为mock模拟数据，如有雷同纯属巧合^_^

elementui:el-table支持搜索、切换分页多选功能，以及数据回显
weixin_60172238的博客
02-07 792
el-table支持搜索、切换分页多选功能，以及数据回显
vue中tab切换前端实现_vue + element-ui 制作tab切换（切换vue组件，踩坑总结）
weixin_34175919的博客
12-29 3131
本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。1、vue如何使用element-ui上一篇文章已经分享了如何在vue中使用element-ui创建tab组件切换内容(需要了解的朋友点击链接查看)2、创建相应文件。a、创建父组件 src/components/tabZujian.vueb、创建自组件(被切换的组件)src/tabComp...
解决el-tabs默认激活【非点击】状态下，底部边框不展示的问题
最新发布
qq_44741577的博客
03-13 228
这是因为el-tabs的在没有点击的时候，激活样式的底部边框宽度是0。解决办法：给e-tabs加上一个随机key。
element-ui tabs+table 实现点击表格切换标签页
paradoxaaa_的博客
06-17 990
客户需求：点击主任务标签页中的表格 跳转到子任务所在的标签页。
论如何写出一篇高质量的英文论文_英文论文怎么写博客
2401_84435866的博客
05-04 535
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。t基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。
Vue3-elementui中el-tabs切换实时更新数据
唱、跳、Rap、篮球
05-16 6874
el-tabs 使用时会一次性把所有 tab 里的请求读完，之后进行 tab 切换，不再重新读取请求 想要实现切换 tab ，通过以下代码实现实时更新数据的要求。分别为自定义的tab子页面。
解决elenemtUi中使用el-tabs组件多个标签页切换el-table时，出现宽度压缩(缩小)的问题
qq_45404003的博客
07-28 3606
需要注意的是，doLayout() 方法只能在组件完全渲染后才能调用，否则可能会出现计算不准确的情况。解决方法就是使用el-table组件中的doLayout()方法是用来重新计算组件大小和位置的。当我们对组件进行动态修改后，可能会导致组件大小或者位置发生改变，此时可以调用 doLayout() 方法来重新计算并更新组件的布局。这样就会重新计算并更新表格的布局。
vue中使用elementUI使用el-tabs，切换Tab如何实现实时加载，以及el-table表格使用总结
weixin_42415158的博客
03-23 9972
vue中使用elementUI使用el-tabs，切换Tab如何实现实时加载，以及el-table表格使用总结
vue实现日历表格（element-ui）
01-18
本文实例为大家分享了vue实现日历表格的具体代码，供大家参考，具体内容如下 效果如图： html：后面的日期是循环出来的 <div class=calendar-title> <span class=calendar-left click=lastDateclick>< ...
vue + element-ui 制作tab切换（切换vue组件，踩坑总结）
weixin_41697323的博客
01-12 1332
本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。 1、vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用element-ui创建tab组件切换内容（需要了解的朋友点击链接查看） 2、创建相应文件。 　　a、创建父组件 src/components/tabZujian.vue 　　b、创建自组件（被切换的...
基于vue+element-ui实现Cascader级联选择器+Table树形数据
椰卤工程师的个人博客
11-13 2343
开发进度提前50%，啊，真香。 下面，看图说话 Table树形数据 Cascader级联选择器 功能实现+详细代码 Cascader级联选择器 options属性指定选项数组即可渲染出一个级联选择器，所以后端接口返回的数据结构要保持一一致性，这样处理起来会省很多事。 element官网给出的options需要的数据格式： options: [{ value: 'zhinan', label: '指南', children: [{
ajax-tab(动态加载tab) 切换
07-04
ajax-tab(动态加载tab) 切换
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
热门推荐
前端技术的学习整理
05-22 3万+
表头主要复杂在：1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值2，首列和末尾列是一层3，整个表格的维度是根据数据的输入自己生成，也就是动态的下面是在 vue + eleUI 中的解决方案：&lt;el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...
el-tabs如何切换组件，动态切换
ZZZZZZZZjy的博客
12-06 3116
v-if用于根据条件判断是否渲染指定的元素或组件，里的条件是"activeName === item.name"，即当组件的name属性值与当前激活的标签页名称(activeName)相同时，才渲染该组件。而v-bind(:)用于动态绑定属性值，这里的属性是"is"，它指定了要渲染的组件类型，即item.components，表示渲染当前标签页对应的组件。
Vue+ElementUI+Table实现表格初始化选中数据以及分页切换保留勾选数据
weixin_44190511的博客
02-17 3513
Vue+ElementUI+Table实现表格初始化选中数据以及分页切换保留勾选数据
vue结合element-ui开发tab切换vue的不同组件，获取不同组件的后端提供的list列表
星
01-05 2351
此标签页用于基于若依框架开发的医疗系统中的页面。 1.创建父组件：系统中对应的组件路径：src/yao/index.vue 2.创建子组件src/tabComponents 文件夹 （此处路径可以任意，只要在父组件里引用正确即可）之下有不同组件对应的内容，此处以两个组件为例： Child1.vue Child2.vue 3.编写组件实现tab切换不同子组件 父组件:index.vue <template> <div class="index"> ...
el-table中数据的动态加载
weixin_44279243的博客
09-04 826
点击“转换按钮”之后，数据变化。
Vue 中利用 el-table 实现懒加载的数据表格
pleaseprintf的博客
06-22 7314
在使用 Vue 开发时，当数据量较大时，为了提高页面加载和渲染的性能，我们可以采用懒加载的方式，即在 el-table（element-ui 的表格组件）上实现懒加载。本文将详细介绍在 Vue 中如何利用 el-table 实现懒加载的方法，帮助您优化页面性能并提升用户体验。通过在 Vue 中利用 el-table 实现懒加载，我们可以优化页面性能，提高用户体验。通过分页获取数据、监听滚动事件、加载下一页数据和动态渲染表格数据，实现了 el-table 的懒加载功能。
swiper组件实现tab——内容切换、动态数据请求、加载
ansheng02的博客
03-31 8437
swiper是一个很好用的插件，免费、开源，关于轮播、切换、分页、动画效果等等。官网上给的源码案例，嗯，很基础，太基础了，哈~幸好文档还算OK，如果实现更好的具有设计感的页面，还是很好的。 之前在网上看过一个淘宝案例的源码，通过滑动地球来变换商品，额…代码理解并不难，但有设计感。跑题了，这个之后再详细解读，今儿要说的是，使用swiper实现tab切换，并让每一个内容模块都可以动态请求加载...
elementui el-tabs el-tabs--top 动态table切换
09-13
`element-ui` 是一个基于 Vue.js 的桌面端组件库，提供了丰富的 UI 组件，用于构建交互式的用户界面。`el-tabs` 是 `element-ui` 中的一个标签页组件，它可以创建包含多个面板的标签页，用户可以通过切换标签页来查看不同的内容。 `el-tabs--top` 是 `el-tabs` 组件的一个属性，用于指定标签页的布局位置。当使用 `el-tabs--top` 时，标签页将显示在内容区域的上方。 关于“动态table切换”，通常是指在使用 `el-tabs` 组件时，根据切换的不同标签页，表格（table）也会相应地进行动态更新。这通常涉及到数据的动态绑定和组件的条件渲染。 在 `element-ui` 中，你可以使用 `v-if` 或者 `v-show` 指令来实现动态切换表格内容。通过监听 `el-tabs` 的 `tab-click` 事件来判断当前选中的标签页，然后根据这个标签页来决定显示哪个表格数据。 以下是一个简单的示例代码： ```html <template> <el-tabs v-model="activeName" @tab-click="handleTabClick"> <el-tab-pane label="用户管理" name="first">用户表格数据</el-tab-pane> <el-tab-pane label="订单管理" name="second">订单表格数据</el-tab-pane> <!-- 更多tab-pane --> </el-tabs> <el-table v-if="activeName === 'first'" :data="userTableData"> <!-- 用户表格内容 --> </el-table> <el-table v-else-if="activeName === 'second'" :data="orderTableData"> <!-- 订单表格内容 --> </el-table> <!-- 更多表格 --> </template> <script> export default { data() { return { activeName: 'first', // 当前激活的标签页名称 userTableData: [], // 用户表格数据 orderTableData: [], // 订单表格数据 }; }, methods: { handleTabClick(tab, event) { // 根据tab.name来更新数据或者其他逻辑 }, }, }; </script> ``` 在这个示例中，当用户点击不同的标签页时，会触发 `handleTabClick` 方法，在该方法中可以编写更新表格数据的逻辑，然后根据 `activeName` 的值来决定显示哪个表格。
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序媛七分

随多随少随你心意^-^

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值