el-tabs值修改时更新路由参数值

野性酷女 2021-12-15 11:39 199阅读 0赞

<template>
        <div class="my_case">
            <img src="../../../static/images/case_banner.jpg" class="wp1920"/>
            
            <el-tabs type="border-card"  v-model="typeId" @tab-click="handleClick">
                <el-tab-pane v-for="(item,index) in caseType" :key="index" :label="item.title" :name="item.id" >
                    <img v-if="noData" src="../../../static/images/noData.png" class="noData" />
                    <CaseList v-else :caseList="caseList" :typeId="typeId"></CaseList>
                </el-tab-pane>
            </el-tabs>
            
            <div class="wp">
                
                <div class="fy block" style="margin: 0 auto; margin-bottom: 74px;">
                    <el-pagination background :total="totalNum" :page-size="pageSize" @current-change="handleCurrentChange" layout="prev, pager, next, jumper">
                    </el-pagination>
                </div>
                
                
                <consult></consult>
                
            </div>
            <linian></linian>
        </div>
    </template>
    
    <script>
    export default {
        data(){
            return {
                currentPage: 1,
                pageSize: 12,//每页显示几条
                totalNum: 0,//总页数
                startPage: 1,//起始页
                caseType: [],
                caseList: [],
                typeId: '0', //分类id
                noData: false//true表示暂无数据
            }
        },
        created() {
            this.getCaseType();
            this.typeId = this.$route.query.type;
            this.getCaseList(this.startPage);
        },
        methods: {
            handleCurrentChange(val) {
                this.getCaseList(val);
            },
            //获取案例下所有类型
            getCaseType() {
                this.$axios.post("/get_category_type",{
                    "position_id": 2,
                }).then((response) => {
                    let res = response.data;
                    if(res.status == 1){
                        this.caseType = res.data;
                    }else{
                        this.$layer.msg(res.message);
                    }
                }).catch((err) =>{
                    console.log(err);
                })
            },
            //点击tab项切换显示内容列表
            handleClick(tab) {
                this.typeId = tab.name;
                this.getCaseList(this.startPage);
                //切换tab页时更新路由参数
                this.$router.push({path:'/case?type=' + this.typeId});
            },
            //获取分类下案例列表
            getCaseList(startPage) {
                this.$axios.post("/get_cate_article_all",{
                    "position_id": 2, 
                    "type_id": this.typeId,
                    "page": startPage,
                    "per_page": this.pageSize
                }).then((response) => {
                    let res = response.data;
                    console.log(this.caseList);
                    if(res.status == 1){
                        this.caseList = res.data.data;
                        if(this.caseList.length == 0){
                            this.noData = true;
                        }else{
                            this.noData = false;
                        }
                        this.totalNum = res.data.total;
                    }else{
                        this.$layer.msg(res.message);
                    }
                }).catch((err) =>{
                    console.log(err);
                })
            }
        },
        watch: {
            $route(){
                this.typeId = this.$route.query.type;
            },
            typeId() {
                //获取案例列表信息
                this.getCaseList(this.startPage);
            },
        }
    }</script>
    
    <style>
    .noData {
        display: block;
        width: 226px;
        height: 192px;
        margin: 80px auto;
    }
    .el-tabs--border-card>.el-tabs__content {
        padding: 15px 0 !important;
    }
    
    
    </style>

转载于:https://www.cnblogs.com/duanzhenzhen/p/11089418.html