elemet-ui tab切换里面的表格数据+顶部返回按钮

最新推荐文章于 2023-09-14 16:46:45 发布

智慧的狗狗

最新推荐文章于 2023-09-14 16:46:45 发布

阅读量505

点赞数

文章标签： tab栏返回按钮

本文链接：https://blog.csdn.net/qq_43427364/article/details/98490111

版权

在这里插入图片描述
查看更多时进入tab页面

直接在这个内部pane里面在tab栏上方添加一个div,添加固定定位，会跟着整个tab跑，在侧边栏进入的查看更多切换到这个tab里面只是使用了v-if切换组件显示，返回也并非在路由或者其他location返回只是显示为false重新加载true的页面

   .return-btn {
        display: flex;
        justify-content: flex-end;
        margin-right: 40px;

        .goback {
            position: absolute;
            z-index: 99;
            margin-top: 5px;
            padding: 8px 18px;

        }
    }

差点忘了提切换栏里的表格了，表格跟上一篇文章分享的一样唯一不一样的就是它的分页器，三个栏里的表格显示的数据不一样，用的是同一个接口，传的是不同的参数，
分页器加了size选项，：page-size是每页的条数，：page-sizes是条数的可选项；值其实还是：page-size控制；在handleSizeChange绑定size

    <el-pagination class="changepage" background layout="prev, pager, next,jumper,sizes,total" :total="total" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="size" @current-change="handleCurrentChange" @size-change="handleSizeChange">
        </el-pagination>
          //methods方法 
             handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.backData.page = val;
            this.getPunishmentPage(this.backData);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.size=val;
            this.backData.pageSize = val;
            this.currentPage = 1;
            this.backData.page = 1;
            this.getPunishmentPage(this.backData);
        },
 //tab的切换显示
   handleClick(a) {
            console.log(a);
            if (a == 'one') {
                this.backData.type = 1;
                this.backData.page = 1;
                this.currentPage = 1
                this.getPunishmentPage(this.backData);
            } else if (a == 'two') {
                this.backData.type = 2;
                this.backData.page = 1;
                this.currentPage = 1
                this.getPunishmentPage(this.backData);
            } else if (a == 'three') {
                this.backData.type = 3;
                this.backData.page = 1;
                this.currentPage = 1
                this.getPunishmentPage(this.backData);
            }
        },