自定義封裝組件(分頁器)

来源:https://www.cnblogs.com/ljybg/archive/2022/06/18/jy.html
-Advertisement-
Play Games

自定義封裝分頁器組件之前需要知道的數據: 1.當前的頁碼 2.總共多少條數據 3.每頁展示多少條數據 4.連續頁碼數(5|7) 5.總頁數 計算連續頁碼數的起始值和結束值 //通過計算屬性來計算出來 computed:{ startNumAndEndNum(){ //首先先結構出我們需要的值(當前頁 ...


自定義封裝分頁器組件之前需要知道的數據:

1.當前的頁碼
2.總共多少條數據
3.每頁展示多少條數據
4.連續頁碼數(5|7)
5.總頁數

計算連續頁碼數的起始值和結束值

//通過計算屬性來計算出來
computed:{
    startNumAndEndNum(){
      //首先先結構出我們需要的值(當前頁碼值,總頁數,連續頁碼數),這個值可以讓父組件通過props進行傳遞
      let {pageNo,totalPage,continues} = this
      //給起始值和結束值賦初始變數
      let start = 0,end = 0;
      //判斷當前總頁數是否小於連續頁碼數
      if(totalPage<continues){
        start=1;end=totalPage;
     } else{
        //如果總頁數大於連續頁碼數
        start = pageNo - parseInt(continues/2);
        end = pageNo + parseInt(continues/2);
        //還要判斷起始值是否小於1
        if(start<1){
          start = 1;
          end = continues;
        }
        //判斷結束值是否大於總頁數
        if(end>totalPage){
          end = totalPage;
          start = totalPage - continues +1
        }
     }
      return {start,end}
   }
 }

剩下我們就可以遍歷結束值,讓遍歷出來的值大於等於起始值顯示,否則隱藏,這樣連續頁碼數的值就有了,再根據其他接收到的值進行渲染頁面就可以了

發送請求切換頁面?

通過綁定自定義事件,通過傳入當前的頁碼數發送請求,點擊上一頁,傳入當前的頁碼數-1,點擊下一頁,傳入當前的頁碼數+1,點擊最後一頁直接傳入總頁數

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • #一、防火牆配置 前言:電腦的防火牆配置保證了別的主機無法訪問本機非開放埠 1、防火牆介紹 Linux預設防火牆是開啟的,而且所以的埠對外都是不可訪問的,該策略保證了電腦的安全 但同時也帶來了問題如:其他電腦無法訪問本機上項目開啟的埠號 在Linux上安裝Tomcat,Tomcat軟體需 ...
  • 一、功能變數名稱系統概述 功能變數名稱系統DNS(Domain Name System)是網際網路使用的命名系統,用來把便於人們使用的機器名字轉換成為IP地址。功能變數名稱系統其實就是名字系統。為什麼不叫“名字”而叫“功能變數名稱”呢?這是因為在這種網際網路的命名系統中使用了許多的“域(domain)”,因此就出現了“功能變數名稱”這個名詞。 ...
  • vmstat 是一個查看虛擬記憶體(Virtual Memory)使用狀況的工具,但是怎樣通過 vmstat 來發現系統中的瓶頸呢? 1。 使用vmstat 使用前我們先看下命令介紹及參數定義 Usage: vmstat [options] [delay [count]] Options: -a, - ...
  • Air105 的時鐘 高頻振蕩源 * 晶元支持使用內部振蕩源, 或使用外置12MHz晶體 * 晶元上電覆位後 ROM boot 啟動過程基於內部12MHz的振蕩器 * 晶元內部集成的12MHz振蕩源精度為±2%, 精度一般 * 使用外置12MHz晶體, 需要軟體切換 * 經過PLL倍頻後為系統提供... ...
  • 寫在前面 前些天看了一本漫畫,裡面一個老技術人員的話,讓我不自覺的想到很多東西。 是啊,有時候我們自認為的自我實現,其實就是在湊這個時代的熱鬧,每個時代都有自己的熱鬧,個人之於時代不過是浪花一朵朵。 但這並不能作為我們不去湊這個熱鬧的理由,你去湊時代的這個熱鬧,這個時代必會給予你獎勵,或早或晚,或大 ...
  • 1、Linux常用命令 1.1、Linux命令初體驗 在日常使用過程當中經常使用到的命令有如下幾種 命令 對應英文 作用 ls [目錄名] list 查看當前目錄下的內容 pwd print work directory 查看當前所在目錄 cd [目錄名] change directory 切換目錄 ...
  • 導讀: 本文主要介紹了快手的精排模型實踐,包括快手的推薦系統,以及結合快手業務展開的各種模型實戰和探索,全文圍繞以下幾大方面展開: 快手推薦系統 CTR模型——PPNet 多domain多任務學習框架 短期行為序列建模 長期行為序列建模 千億特征,萬億參數模型 總結和展望 -- 01 快手推薦系統 ...
  • SQL的約束 概述 概念:約束是作用於表中欄位上的規則,用於限制存儲表中的數據; 目的:保證資料庫中數據的正確性、有效性、完整性; 常見的約束分類: 約束 描述 關鍵字 非空約束 限制該欄位的數據不能為null not null 唯一約束 保證該欄位的所有數據都是唯一的、不重覆的 unique 主鍵 ...
一周排行
    -Advertisement-
    Play Games
  • 不廢話,直接代碼 private Stack<Action> actionStack = new Stack<Action>(); private void SetCellValues() { var worksheet = Globals.ThisAddIn.Application.ActiveS ...
  • OpenAPI 規範是用於描述 HTTP API 的標準。該標準允許開發人員定義 API 的形狀,這些 API 可以插入到客戶端生成器、伺服器生成器、測試工具、文檔等中。儘管該標準具有普遍性和普遍性,但 ASP.NET Core 在框架內預設不提供對 OpenAPI 的支持。 當前 ASP.NET ...
  • @DateTimeFormat 和 @JsonFormat 是 Spring 和 Jackson 中用於處理日期時間格式的註解,它們有不同的作用: @DateTimeFormat @DateTimeFormat 是 Spring 框架提供的註解,用於指定字元串如何轉換為日期時間類型,以及如何格式化日 ...
  • 一、背景說明 1.1 效果演示 用python開發的爬蟲採集軟體,可自動抓取抖音評論數據,並且含二級評論! 為什麼有了源碼還開發界面軟體呢?方便不懂編程代碼的小白用戶使用,無需安裝python、無需懂代碼,雙擊打開即用! 軟體界面截圖: 爬取結果截圖: 以上。 1.2 演示視頻 軟體運行演示視頻:見 ...
  • SpringBoot筆記 SpringBoot文檔 官網: https://spring.io/projects/spring-boot 學習文檔: https://docs.spring.io/spring-boot/docs/current/reference/html/ 線上API: http ...
  • 作為後端工程師,多數情況都是給別人提供介面,寫的好不好使你得重視起來。 最近我手頭一些活,需要和外部公司對接,我們需要提供一個介面文檔,這樣可以節省雙方時間、也可以防止後續扯皮。這是就要考驗我的介面是否規範化。 1. 介面名稱清晰、明確 顧名思義,介面是做什麼的,是否準確、清晰?讓使用這一眼就能知道 ...
  • 本文介紹基於Python語言,遍歷文件夾並從中找到文件名稱符合我們需求的多個.txt格式文本文件,並從上述每一個文本文件中,找到我們需要的指定數據,最後得到所有文本文件中我們需要的數據的合集的方法~ ...
  • Java JUC&多線程 基礎完整版 目錄Java JUC&多線程 基礎完整版1、 多線程的第一種啟動方式之繼承Thread類2、多線程的第二種啟動方式之實現Runnable介面3、多線程的第三種實現方式之實現Callable介面4、多線的常用成員方法5、線程的優先順序6、守護線程7、線程的讓出8、線 ...
  • 實時識別關鍵詞是一種能夠將搜索結果提升至新的高度的API介面。它可以幫助我們更有效地分析文本,並提取出關鍵詞,以便進行進一步的處理和分析。 該介面是挖數據平臺提供的,有三種模式:精確模式、全模式和搜索引擎模式。不同的模式在分詞的方式上有所不同,適用於不同的場景。 首先是精確模式。這種模式會儘量將句子 ...
  • 1 為啥要折騰搭建一個專屬圖床? 技術大佬寫博客都用 md 格式,要在多平臺發佈,圖片就得有外鏈 後續如博客遷移,國內博客網站如掘金,簡書,語雀等都做了防盜鏈,圖片無法遷移 2 為啥選擇CloudFlare R2 跳轉:https://dash.cloudflare.com/ 有白嫖額度 免費 CD ...