devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小丑西瓜9 | 2024-02-20 07:07:40

赞

踩

el-tabs

实战场景描述

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

1、确定好每个Tab内容

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

2、Tab切换事件

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

 

3、完整代码

主页面：

  1. <template>
  2.     <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" >
  3.         <!-------------------------------------------------------->
  4.         <el-tab-pane label="待审核" name="audit">
  5.             <AuditList  v-if="activeName == 'audit'" ref="audit"></AuditList>
  6.         </el-tab-pane>
  7.         <!-------------------------------------------------------->
  8.         <el-tab-pane label="已通过" name="pass">
  9.             <PassList v-if="activeName == 'pass'" ref="pass"></PassList></el-tab-pane>
  10.         <!-------------------------------------------------------->
  11.         <el-tab-pane label="已否决" name="noPass">
  12.             <NoPassList v-if="activeName == 'noPass'" ref="noPass"></NoPassList>
  13.         </el-tab-pane>
  14.         <!-------------------------------------------------------->
  15.         <el-tab-pane label="已忽略" name="ignore">
  16.             <IgnoreList v-if="activeName == 'ignore'" ref="ignore"></IgnoreList>
  17.         </el-tab-pane>
  18.     </el-tabs>
  19. </template>
  20.  
  21. <script>
  22.   import PassList from "./PassList2";
  23.   import NoPassList from "./NoPassList2";
  24.   import IgnoreList from "./IgnoreList2";
  25.   import AuditList from "./AuditList2";
  26.   export default {
  27.     name: "TEMPLATE",
  28.     components: {
  29.       PassList,
  30.       NoPassList,
  31.       IgnoreList,
  32.       AuditList
  33.     },
  34.     data(){
  35.       return {
  36.         activeName: 'audit'
  37.       };
  38.     },
  39.     mounted(){
  40.       this.onQuery();
  41.     },
  42.     methods:{
  43.       handleClick(tab, event) {
  44.         this.activeName = tab.name;
  45.         var that = this;
  46.         setTimeout(function(){
  47.             that.onQuery();
  48.         },500);
  49.       },
  50.       
  51.       onQuery() {
  52.         this.$refs[this.activeName].getList();
  53.       },
  54.  
  55.     }
  56.   }
  57. </script>
  58.  
  59. <style scoped>
  60.  
  61. </style>
已通过PassList2.vue：
  1. <template>
  2.    <div>
  3.        <el-table
  4.                :data="tableData"
  5.                border
  6.                stripe
  7.                style="width: 100%">
  8.            <el-table-column
  9.                    label="序号"
  10.                    align="center"
  11.                    width="70px">
  12.                <template slot-scope="scope">
  13.                    {{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
  14.                </template>
  15.            </el-table-column>
  16.            <el-table-column
  17.                    label="人员姓名"
  18.                    prop="pName">
  19.            </el-table-column>
  20.            <el-table-column
  21.                    label="联系电话"
  22.                    prop="phone">
  23.            </el-table-column>
  24.            <el-table-column
  25.                    label="所在楼层"
  26.                    prop="floor">
  27.            </el-table-column>
  28.            <el-table-column
  29.                    label="房间编号"
  30.                    prop="spaceNum">
  31.            </el-table-column>
  32.            <el-table-column
  33.                    label="人员备注"
  34.                    prop="notes">
  35.            </el-table-column>
  36.            <el-table-column
  37.                    label="提交时间"
  38.                    prop="submitTime">
  39.            </el-table-column>
  40.            <el-table-column
  41.                    label="审核时间"
  42.                    prop="auditTime">
  43.            </el-table-column>
  44.        </el-table>
  45.        <el-pagination background
  46.                       layout="total, prev, pager, next, sizes,jumper"
  47.                       :page-sizes="[5, 10, 15]"
  48.                       :page-size="formInline.pageSize"
  49.                       :total="dataTotalCount"
  50.                       @size-change="handleSizeChange"
  51.                       @current-change="handleCurrentChange">
  52.        </el-pagination>
  53.    </div>
  54. </template>
  55.  
  56. <script>
  57.   export default {
  58.     name: "PassList",
  59.     data(){
  60.       return {
  61.         dataTotalCount: 0,      //查询条件的总数据量
  62.         formInline: {
  63.           currentPage: 1,
  64.           pageSize:10,
  65.         },
  66.         tableData: [],
  67.       }
  68.     },
  69.     methods:{
  70.  
  71.       //分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
  72.       handleSizeChange: function(size) {
  73.         this.formInline.pageSize = size;
  74.         this.getList();
  75.       },
  76.  
  77.       // 控制页面的切换
  78.       handleCurrentChange: function(currentpage) {
  79.         this.formInline.currentPage = currentpage;
  80.         this.getList();
  81.       },
  82.  
  83.       getList() {
  84.         var that = this;
  85.         that.axios.get('/dev-api/server/accessAudit/passList', {params:this.formInline})
  86.           .then(function (response) {
  87.             that.tableData = response.data.data.items;
  88.             that.dataTotalCount = response.data.data.total;
  89.           })
  90.           .catch(function (error) {
  91.             that.$message({
  92.               type: 'error',
  93.               message: '系统异常：'+error
  94.             });
  95.           });
  96.       },
  97.  
  98.     }
  99.   }
  100. </script>
  101.  
  102. <style scoped>
  103.  
  104. </style>

 已否决列表NoPassList2.vue

  1. <template>
  2.    <div>
  3.        <el-table
  4.                :data="tableData"
  5.                border
  6.                stripe
  7.                style="width: 100%">
  8.            <el-table-column
  9.                    label="序号"
  10.                    align="center"
  11.                    width="70px">
  12.                <template slot-scope="scope">
  13.                    {{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
  14.                </template>
  15.            </el-table-column>
  16.            <el-table-column
  17.                    label="人员姓名"
  18.                    prop="pName">
  19.            </el-table-column>
  20.            <el-table-column
  21.                    label="联系电话"
  22.                    prop="phone">
  23.            </el-table-column>
  24.            <el-table-column
  25.                    label="所在楼层"
  26.                    prop="floor">
  27.            </el-table-column>
  28.            <el-table-column
  29.                    label="房间编号"
  30.                    prop="spaceNum">
  31.            </el-table-column>
  32.            <el-table-column
  33.                    label="提交时间"
  34.                    prop="submitTime">
  35.            </el-table-column>
  36.            <el-table-column
  37.                    label="人员备注"
  38.                    prop="notes">
  39.            </el-table-column>
  40.            <el-table-column
  41.                    label="审核时间"
  42.                    prop="auditTime">
  43.            </el-table-column>
  44.            <el-table-column
  45.                    label="否决原因"
  46.                    prop="reason">
  47.            </el-table-column>
  48.        </el-table>
  49.        <el-pagination background
  50.                       layout="total, prev, pager, next, sizes,jumper"
  51.                       :page-sizes="[5, 10, 15]"
  52.                       :page-size="formInline.pageSize"
  53.                       :total="dataTotalCount"
  54.                       @size-change="handleSizeChange"
  55.                       @current-change="handleCurrentChange">
  56.        </el-pagination>
  57.    </div>
  58. </template>
  59.  
  60. <script>
  61.   export default {
  62.     name: "NoPassList",
  63.     data(){
  64.       return {
  65.         dataTotalCount: 0,      //查询条件的总数据量
  66.         formInline: {
  67.           currentPage: 1,
  68.           pageSize:10,
  69.         },
  70.         tableData: [],
  71.       }
  72.     },
  73.     methods:{
  74.  
  75.       //分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
  76.       handleSizeChange: function(size) {
  77.         this.formInline.pageSize = size;
  78.         this.getList();
  79.       },
  80.  
  81.       // 控制页面的切换
  82.       handleCurrentChange: function(currentpage) {
  83.         this.formInline.currentPage = currentpage;
  84.         this.getList();
  85.       },
  86.  
  87.       getList(data) {
  88.         if(data){
  89.           this.formInline.info = data.info;
  90.           this.formInline.pType = data.pType;
  91.           this.formInline.floor = data.floor;
  92.         }
  93.  
  94.         var that = this;
  95.         that.axios.get('/dev-api/server/accessAudit/noPassList', {params:this.formInline})
  96.           .then(function (response) {
  97.             that.tableData = response.data.data.items;
  98.             that.dataTotalCount = response.data.data.total;
  99.           })
  100.           .catch(function (error) {
  101.             that.$message({
  102.               type: 'error',
  103.               message: '系统异常：'+error
  104.             });
  105.           });
  106.       },
  107.  
  108.     }
  109.   }
  110. </script>
  111.  
  112. <style scoped>
  113.  
  114. </style>

已忽略列表IgnoreList2.vue

  1. <template>
  2.    <div>
  3.        <el-table
  4.                :data="tableData"
  5.                border
  6.                stripe
  7.                style="width: 100%">
  8.            <el-table-column
  9.                    label="序号"
  10.                    align="center"
  11.                    width="70px">
  12.                <template slot-scope="scope">
  13.                    {{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
  14.                </template>
  15.            </el-table-column>
  16.            <el-table-column
  17.                    label="人员姓名"
  18.                    prop="pName">
  19.            </el-table-column>
  20.            <el-table-column
  21.                    label="联系电话"
  22.                    prop="phone">
  23.            </el-table-column>
  24.            <el-table-column
  25.                    label="所在楼层"
  26.                    prop="floor">
  27.            </el-table-column>
  28.            <el-table-column
  29.                    label="房间编号"
  30.                    prop="spaceNum">
  31.            </el-table-column>
  32.            <el-table-column
  33.                    label="人员备注"
  34.                    prop="notes">
  35.            </el-table-column>
  36.            <el-table-column
  37.                    label="提交时间"
  38.                    prop="submitTime">
  39.            </el-table-column>
  40.            <el-table-column
  41.                    label="审核时间"
  42.                    prop="auditTime">
  43.            </el-table-column>
  44.        </el-table>
  45.        <el-pagination background
  46.                       layout="total, prev, pager, next, sizes,jumper"
  47.                       :page-sizes="[5, 10, 15]"
  48.                       :page-size="formInline.pageSize"
  49.                       :total="dataTotalCount"
  50.                       @size-change="handleSizeChange"
  51.                       @current-change="handleCurrentChange">
  52.        </el-pagination>
  53.    </div>
  54. </template>
  55.  
  56. <script>
  57.   export default {
  58.     name: "IgnoreList",
  59.     data(){
  60.       return {
  61.         dataTotalCount: 0,      //查询条件的总数据量
  62.         formInline: {
  63.           currentPage: 1,
  64.           pageSize:10,
  65.         },
  66.         tableData: [],
  67.       }
  68.     },
  69.     methods:{
  70.  
  71.       //分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
  72.       handleSizeChange: function(size) {
  73.         this.formInline.pageSize = size;
  74.         this.getList();
  75.       },
  76.  
  77.       // 控制页面的切换
  78.       handleCurrentChange: function(currentpage) {
  79.         this.formInline.currentPage = currentpage;
  80.         this.getList();
  81.       },
  82.  
  83.       getList(data) {
  84.         if(data){
  85.           this.formInline.info = data.info;
  86.           this.formInline.pType = data.pType;
  87.           this.formInline.floor = data.floor;
  88.         }
  89.  
  90.         var that = this;
  91.         that.axios.get('/dev-api/server/accessAudit/ignoreList', {params:this.formInline})
  92.           .then(function (response) {
  93.             that.tableData = response.data.data.items;
  94.             that.dataTotalCount = response.data.data.total;
  95.           })
  96.           .catch(function (error) {
  97.             that.$message({
  98.               type: 'error',
  99.               message: '系统异常：'+error
  100.             });
  101.           });
  102.       },
  103.  
  104.     }
  105.   }
  106. </script>
  107.  
  108. <style scoped>
  109.  
  110. </style>

待审核列表AuditList2.vue

  1. <template>
  2.     <div>
  3.         <el-table
  4.                 :data="tableData"
  5.                 border
  6.                 stripe
  7.                 style="width: 100%">
  8.             <el-table-column
  9.                     align="center"
  10.                     label="序号"
  11.                     width="70px">
  12.                 <template slot-scope="scope">
  13.                     {{(formInline.currentPage-1)*formInline.pageSize + scope.$index + 1}}
  14.                 </template>
  15.             </el-table-column>
  16.             <el-table-column
  17.                     label="人员姓名"
  18.                     prop="pName">
  19.             </el-table-column>
  20.             <el-table-column
  21.                     label="联系电话"
  22.                     prop="phone">
  23.             </el-table-column>
  24.             <el-table-column
  25.                     label="所在楼层"
  26.                     prop="floor">
  27.             </el-table-column>
  28.             <el-table-column
  29.                     label="房间编号"
  30.                     prop="spaceNum">
  31.             </el-table-column>
  32.             <el-table-column
  33.                     label="认证图片"
  34.                     prop="imgUrl">
  35.             </el-table-column>
  36.             <el-table-column
  37.                     label="提交时间"
  38.                     prop="submitTime">
  39.             </el-table-column>
  40.             <el-table-column
  41.                     label="人员备注"
  42.                     prop="notes">
  43.             </el-table-column>
  44.             <el-table-column align="center" fixed="right" label="操作" width="300">
  45.                 <template slot-scope="scope">
  46.                     <el-button icon="el-icon-s-claim" size="mini">通过</el-button>
  47.                     <el-button icon="el-icon-s-release" size="mini">否决</el-button>
  48.                     <el-button icon="el-icon-takeaway-box"  size="mini">忽略</el-button>
  49.                 </template>
  50.             </el-table-column>
  51.         </el-table>
  52.         <el-pagination :page-size="formInline.pageSize"
  53.                        :page-sizes="[5, 10, 15]"
  54.                        :total="dataTotalCount"
  55.                        @current-change="handleCurrentChange"
  56.                        @size-change="handleSizeChange"
  57.                        background
  58.                        layout="total, prev, pager, next, sizes,jumper">
  59.         </el-pagination>
  60.     </div>
  61. </template>
  62.  
  63. <script>
  64.   export default {
  65.     name: "TEMPLATE",
  66.     data() {
  67.       return {
  68.         dataTotalCount: 0,      //查询条件的总数据量
  69.         formInline: {
  70.           currentPage: 1,
  71.           pageSize: 10,
  72.         },
  73.         tableData: [],
  74.       }
  75.     },
  76.     methods: {
  77.       //分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
  78.       handleSizeChange: function (size) {
  79.         this.formInline.pageSize = size;
  80.         this.getList();
  81.       },
  82.  
  83.       // 控制页面的切换
  84.       handleCurrentChange: function (currentpage) {
  85.         this.formInline.currentPage = currentpage;
  86.         this.getList();
  87.       },
  88.  
  89.       getList() {
  90.         var that = this;
  91.         that.axios.get('/dev-api/server/accessAudit/list', {params: that.formInline})
  92.           .then(function (response) {
  93.             that.tableData = response.data.data.items;
  94.             that.dataTotalCount = response.data.data.total;
  95.           })
  96.           .catch(function (error) {
  97.             that.$message({
  98.               type: 'error',
  99.               message: '系统异常：' + error
  100.             });
  101.           });
  102.       }
  103.     }
  104.   }
  105. </script>
  106.  
  107. <style scoped>
  108.  
  109. </style>

最终效果

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/119018
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号