成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

關(guān)于vue+element-ui項(xiàng)目的分頁(yè)，返回默認(rèn)顯示第一頁(yè)的問(wèn)題解決

YFan / 1979人閱讀

摘要：所以這就導(dǎo)致，頁(yè)面內(nèi)容正確，但是頁(yè)碼高亮依舊是第一頁(yè)解決辦法我們需要在之后刷新這個(gè)分頁(yè)組件或者讓分頁(yè)組件的后于之后加載到頁(yè)面。然后再次測(cè)試，發(fā)現(xiàn)完美解決問(wèn)題。

問(wèn)題描述

當(dāng)前頁(yè)面如下

然后點(diǎn)擊頁(yè)碼跳到第3頁(yè)，然后在第三頁(yè)點(diǎn)擊頁(yè)面鏈接跳轉(zhuǎn)到新的頁(yè)面

然后在新頁(yè)面點(diǎn)擊返回按鈕，返回到當(dāng)前頁(yè)，結(jié)果頁(yè)面分頁(yè)顯示第一頁(yè)，對(duì)應(yīng)頁(yè)面內(nèi)容也是第一頁(yè)

期望效果

從新頁(yè)面返回的時(shí)候，頁(yè)碼和頁(yè)面內(nèi)容仍舊保持在跳轉(zhuǎn)離開前的樣子。

解決辦法 利用localStorage或者sessionStorage將跳轉(zhuǎn)頁(yè)面前的currentPage存儲(chǔ)起來(lái)，然后，再次返回當(dāng)前頁(yè)的時(shí)候，在created生命周期里，獲取到存儲(chǔ)的currentPage，再進(jìn)行加載 代碼解釋 我這里用的是sessionStorage，關(guān)于sessionStorage的使用，我這邊先做下解釋，以免后面看不懂。之前開發(fā)的時(shí)候我是先在全局定義了兩個(gè)sessionStorage的方法，用于存取值 
//給sessionStorage存值
setContextData: function(key, value) { 
    if(typeof value == "string"){
        sessionStorage.setItem(key, value);
    }else{
        sessionStorage.setItem(key, JSON.stringify(value));
    }
},
// 從sessionStorage取值
getContextData: function(key){
    const str = sessionStorage.getItem(key);
    if( typeof str == "string" ){
        try{
            return JSON.parse(str);
        }catch(e) {
            return str;
        }
    }
    return;
}

分頁(yè)代碼

然后將currentPage在每次點(diǎn)擊頁(yè)碼的時(shí)候存到sessionStorage里

這里解釋下，qryTableData()是我定義的請(qǐng)求接口交易，刷新頁(yè)面內(nèi)容的方法。

然后在當(dāng)前頁(yè)的created生命周期里從sessionStorage里面取currentPage。

這樣，我們?cè)俜祷禺?dāng)前頁(yè)的時(shí)候，頁(yè)面內(nèi)容將會(huì)是跳轉(zhuǎn)離開前的樣子。

但是至此工作僅僅完成一半，因?yàn)槲覀儼l(fā)現(xiàn)這個(gè)bug并沒(méi)有完全解決

問(wèn)題造成原因
我們返回當(dāng)前頁(yè)面取得總條數(shù)totalNum的之前，element-ui的分頁(yè)組件已經(jīng)在頁(yè)面加載完畢，當(dāng)時(shí)的totalNum綁定的是data里面初始化的數(shù)據(jù)0，所以當(dāng)總條數(shù)為0的時(shí)候，分頁(yè)組件的頁(yè)碼默認(rèn)為1。并且當(dāng)totalNum在created生命周期里取得數(shù)據(jù)后，分頁(yè)組件也不會(huì)刷新。所以這就導(dǎo)致， 頁(yè)面內(nèi)容正確，但是頁(yè)碼高亮依舊是第一頁(yè)

解決辦法
我們需要在created之后刷新這個(gè)分頁(yè)組件或者讓分頁(yè)組件的html后于created之后加載到頁(yè)面。
再次刷新這個(gè)分頁(yè)組件是不現(xiàn)實(shí)的，我們選擇在created之后加載分頁(yè)組件。具體辦法就是使用v-if。在totalNum不為data里面給的初始值0的時(shí)候，才讓這段html加載到頁(yè)面。

然后再次測(cè)試，發(fā)現(xiàn)完美解決問(wèn)題。

后續(xù)：
這里為什么用的是v-if而不是v-show。這就是每個(gè)vue初學(xué)者需要明白的事情了，就是v-if和v-show的區(qū)別。嘿嘿

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108688.html

相關(guān)文章

  • Graphql實(shí)踐——像axios一樣使用Graphql

    摘要：初始化項(xiàng)目使用初始化項(xiàng)目安裝項(xiàng)目結(jié)構(gòu)如下接口所有接口對(duì)封裝接下來(lái)對(duì)進(jìn)行封裝，加上中間件實(shí)現(xiàn)類似于攔截器的效果。 Graphql嘗鮮 在只學(xué)習(xí)graphql client端知識(shí)的過(guò)程中，我們常常需要一個(gè)graphql ide來(lái)提示graphql語(yǔ)法，以及實(shí)現(xiàn)graphql的server端來(lái)進(jìn)行練手。graphql社區(qū)提供了graphiql讓我們使用 graphiql (npm)：一個(gè)交互...

    mumumu 評(píng)論0 收藏0

  • Django 學(xué)習(xí)小組：博客開發(fā)實(shí)戰(zhàn)第三周教程——文章列表分頁(yè)和代碼語(yǔ)法高亮

    摘要：本教程內(nèi)容已過(guò)時(shí)，更新版教程請(qǐng)?jiān)L問(wèn)博客開發(fā)入門教程。當(dāng)分頁(yè)較多時(shí)，總是顯示當(dāng)前頁(yè)及其前幾頁(yè)和后幾頁(yè)的頁(yè)碼教程中使用的是兩頁(yè)，其他頁(yè)碼用省略號(hào)代替。 本教程內(nèi)容已過(guò)時(shí)，更新版教程請(qǐng)?jiān)L問(wèn)： django 博客開發(fā)入門教程。 摘要：前兩期教程我們實(shí)現(xiàn)了博客的 Model 部分，以及 Blog 的首頁(yè)視圖 IndexView，詳情頁(yè)面 DetailView，以及分類頁(yè)面 CategoryVi...

    Luosunce 評(píng)論0 收藏0

  • jq easyui數(shù)據(jù)網(wǎng)絡(luò)的分頁(yè)過(guò)程

    摘要：在涉及到組件的分頁(yè)功能時(shí)，遇到了一點(diǎn)問(wèn)題。由于數(shù)據(jù)較多，這邊不予展示。返回的數(shù)據(jù)必須是符合要求的數(shù)據(jù)，格式如下必須帶有屬性，屬性值為總共的數(shù)據(jù)條數(shù)，是這一頁(yè)的數(shù)據(jù)內(nèi)容，以數(shù)組對(duì)象的形式返回。 第一次寫技術(shù)方面的文章，有點(diǎn)忐忑，總怕自己講的不對(duì)誤導(dǎo)別人。但是萬(wàn)事總有個(gè)開頭，有不足錯(cuò)誤之處，請(qǐng)各位讀者老爺指出。 言歸正傳，最近剛進(jìn)新公司，上頭要求我先熟悉熟悉easyui這個(gè)組件庫(kù)。在涉及到...

    Rainie 評(píng)論0 收藏0

  • jq easyui數(shù)據(jù)網(wǎng)絡(luò)的分頁(yè)過(guò)程

    摘要：在涉及到組件的分頁(yè)功能時(shí)，遇到了一點(diǎn)問(wèn)題。由于數(shù)據(jù)較多，這邊不予展示。返回的數(shù)據(jù)必須是符合要求的數(shù)據(jù)，格式如下必須帶有屬性，屬性值為總共的數(shù)據(jù)條數(shù)，是這一頁(yè)的數(shù)據(jù)內(nèi)容，以數(shù)組對(duì)象的形式返回。 第一次寫技術(shù)方面的文章，有點(diǎn)忐忑，總怕自己講的不對(duì)誤導(dǎo)別人。但是萬(wàn)事總有個(gè)開頭，有不足錯(cuò)誤之處，請(qǐng)各位讀者老爺指出。 言歸正傳，最近剛進(jìn)新公司，上頭要求我先熟悉熟悉easyui這個(gè)組件庫(kù)。在涉及到...

    array_huang 評(píng)論0 收藏0

  • Web打印探秘

    摘要：筆者最近做了一個(gè)在構(gòu)建打印模板的需求，從中學(xué)習(xí)到一些有價(jià)值的東西，特地記錄一篇文章分享。此時(shí)，瀏覽器會(huì)彈出打印預(yù)覽的窗口，通過(guò)頁(yè)面生成了用于打印預(yù)覽。最后，聯(lián)想到也可用于實(shí)現(xiàn)打印模板需求，筆者以和模板為例進(jìn)行了一個(gè)簡(jiǎn)單的實(shí)踐。 筆者最近做了一個(gè)在 Web 構(gòu)建打印模板的需求，從中學(xué)習(xí)到一些有價(jià)值的東西，特地記錄一篇文章分享。 概述 本文首先描述筆者所處的項(xiàng)目組的 Web 打印項(xiàng)目的需求...

    ymyang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<