el-tabs列表切换详情的实现

1.template

<el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="已开户的存款" name="first">
                    <div class="timeChoose">
                        <span class="dateCheck">按开户日期查询</span>
                        <el-date-picker
                            v-model="startTime_first"
                            type="date"
                            placeholder="开始日期"
                            :picker-options="pickerOptions0"
                        ></el-date-picker>
                        <el-date-picker
                            v-model="endTime_first"
                            type="date"
                            placeholder="结束日期"
                            :picker-options="pickerOptions1"
                        ></el-date-picker>

                        <a class="buy_btn_advance confirm_btn" @click="queryOp_1()">查询</a>
                        <a class="buy_btn_advance confirm_btn" @click="Inqueryreset1()">重置</a>
                    </div>
                    <div>
                        <table id="tabOne">
                            <tr>
                                <td>序号</td>
                                <td>产品名称</td>
                                <td>账户余额(元)</td>
                                <td>年化利率</td>
                                <td>存期</td>
                                <td>借记卡子账户</td>
                                <td>开户日期</td>
                                <td>到期日期</td>
                                <td>操作</td>
                            </tr>
                            <tr v-for="(item,index) in tableData " ref="oneTableData">
                                <!-- <td>SALE_NO</td> -->
                                <td>{{index+1}}</td>
                                <td>{{item.prdName}}</td>
                                <td>{{item.accRemaining|formatMoney}}</td>
                                <td>{{item.annualInsrate|replaceClose}}</td>
                                <td>{{item.depositTerm|stringformat}}</td>
                                <td>{{item.subAccount}}</td>
                                <td>{{item.accOpenDate|fmtdt}}</td>
                                <td>{{item.expireDate|fmtdt}}</td>
                                <td>
                                    <a
                                        class="buy_advanceAdd btn_reset"
                                        @click="formerAbstract(item)"
                                    >查看详情</a>
                                    <a v-if="item.ifExtractPart==1" class="buy_advanceAdd btn_reset" @click="affirmAbstract(item)">部分提取</a>
                                    <a class="buy_advanceAdd btn_reset" @click="cancelAccount(item)">销户</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已销户的存款" name="second">
                    <div class="timeChoose">
						<span class="dateCheck">按销户日期查询</span>
                        <el-date-picker
                            v-model="startTime_second"
                            type="date"
                            placeholder="开始日期"
                            :picker-options="pickerOptions0"
                        ></el-date-picker>
                        <el-date-picker
                            v-model="endTime_second"
                            type="date"
                            placeholder="结束日期"
                            :picker-options="pickerOptions1"
                        ></el-date-picker>
                        <a class="buy_btn_advance confirm_btn" @click="queryOp_2()">查询</a>
                        <a class="buy_btn_advance confirm_btn" @click="Inqueryreset_2()">重置</a>
                    </div>
                    <div>
                        <table id="tabTwo">
                            <tr>
                                <td>序号</td>
                                <td>产品名称</td>
                                <td>认购金额(元)</td>
                                <td>年化利率</td>
                                <td>存期</td>
                                <td>借记卡子账户</td>
                                <td>开户日期</td>
                                <td>到期日期</td>
                                <td>销户日期</td>
                                <td>操作</td>
                            </tr>
                            <tr v-for="(item,index) in tableData_2 " ref="thirdTableData">
                                <!-- <td>SALE_NO</td> -->
                                <td>{{index+1}}</td>
                                <td>{{item.prdName}}</td>
                                <td>{{item.subMoney|formatMoney}}</td>
                                <td>{{item.annualInsrate|replaceClose}}</td>
                                <td>{{item.depositTerm|stringformat}}</td>
                                <td>{{item.subAccount}}</td>
                                <td>{{item.accOpenDate|fmtdt}}</td>
                                <td>{{item.expireDate|fmtdt}}</td>
                                <td>{{item.accCloseDate|fmtdt}}</td>
                                <td>
                                    <a
                                        class="buy_advanceAdd btn_reset"
                                        @click="formerAbstract(item)"
                                    >查看详情</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="交易明细" name="third">
                    <div class="timeChoose">
						<span class="dateCheck">按开户日期查询</span>
                        <el-date-picker
                            v-model="startTime_third"
                            type="date"
                            placeholder="开始日期"
                            :picker-options="pickerOptions00"
                        ></el-date-picker>
                        <el-date-picker
                            v-model="endTime_third"
                            type="date"
                            placeholder="结束日期"
                            :picker-options="pickerOptions11"
                        ></el-date-picker>
                        <a class="buy_btn_advance confirm_btn" @click="queryOp_3()">查询</a>
                        <a class="buy_btn_advance confirm_btn" @click="Inqueryreset_3()">重置</a>
                    </div>
                    <div>
                        <table id="tabThird">
                            <tr>
                                <td>序号</td>
                                <td>交易时间</td>
                                <td>交易金额 (元)</td>
                                <td>交易名称</td>
                                <td>产品名称</td>
                                <td>产品代码</td>
                                <td>交易流水号</td>
                                <td>交易状态</td>
                                <td>操作</td>
                            </tr>
                            <tr v-for="(item,index) in tableData_3" ref="twoTableData">
                                <!-- <td>SALE_NO</td> -->
                                <td>{{index+1}}</td>
                                <td>{{item.dealDate|fmtdt1}}</td>
                                <td>{{item.dealMoney|formatMoney}}</td>
                                <td>{{item.dealName}}</td>
                                <td>{{item.prdName}}</td>
                                <td>{{item.prdCode}}</td>
                                <td>{{item.dealSerialnum}}</td>
                                <td>{{item.dealStatus}}</td>
                                <td>
                                    <a
                                        class="buy_advanceAdd btn_reset"
                                        @click="checkAbstract(item)"
                                    >查看详情</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </el-tab-pane>
            </el-tabs>

2.script

watch:{
			activeName(){
				if(this.activeName=='first'){
					this.pageNo=1			
					this.getTableData();
					
				}
				else if(this.activeName=='second'){	
					this.pageNo=1			
					this.getTableData_2();
					
				}else{
					this.pageNo=1
					this.getTableData_3();
					
				}
			}
		},
methods:{
       getTableData() {
            let parames = {
                functionName: "espDepositeServiceOuter",
                methodName: "getEspHold",
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                data: {
                    cis: this.$store.state.flowData.custInfo.cis, //用户id
                    // "orgnCode":"801030",				//网点代码
                    startTime: this.timeRecord1.start, //开始时间
                    endTime: this.timeRecord1.end, //结束时间
                    holdType:'1'

                }
            };
            console.log("查询参数：",parames);
            this.$axios({
                method: "post",
                url: "/CallMethod",
                data: JSON.stringify(parames),
                headers: {
                    accept: "application/json",
                    "Content-Type": "application/json;charset=UTF-8"
                }
            })
                .then(res => {
                    console.log("签约信息查询结果======", res.data);
                    if (res.data.errorCode == "ERRORCODE0000") {
                        this.pages = Math.ceil(
                            res.data.sumCount / this.pageSize
                        );
                        this.tableData = res.data.data.Record;
                        this.$store.commit("addEspList", res.data.data.Record);
                        console.log(res.data.data.Record);
                    } else {
                        console.log(res.data.errorMsg);
                    }
                })
                .catch(error => {
                    // this.isErroyWarn = true;
                    console.log(error);
                });
        },

},
mounted() {
        if(!this.$route.query.activeName){
            this.pageNo=1;
            this.getTableData();
        }
        
        if(this.$route.query.activeName=='first'){
            this.activeName=this.$route.query.activeName;
            setTimeout(() => {
                this.pageNo=this.$route.query.pageNo;
                this.getTableData();
            }, 1);
        }
        if(this.$route.query.activeName=='second'){
            this.activeName=this.$route.query.activeName;
            setTimeout(() => {
                this.pageNo=this.$route.query.pageNo;
                this.getTableData_2();
            }, 1);
        }
        if(this.$route.query.activeName=='third'){
            
            this.activeName=this.$route.query.activeName;
            setTimeout(() => {
                this.pageNo=this.$route.query.pageNo;
                this.getTableData_3();
            }, 1);
            
            
        }
    }