?? 翻頁 上一頁/下一頁

data里面定義?

currentPage: 0   // 當前頁數

?created

初始化時賦值  this.formProps 是表格 要求是對象
this.contractArr 是傳過來要進行分頁的數組對象 初始化顯示第一個created() {this.formProps = this.contractArr[0]}

?html頁面

<div><div>// 左箭頭<span v-if="currentPage > 0" @click="prevPage"> 還有上一頁<img src="@/assets/home/left_one.svg" alt=""></span><span v-else @click="prevPage">   沒有上一頁<img src="@/assets/home/left_two.svg" alt=""></span></div><div>// 右箭頭<span v-if="currentPage < contractArr.length-1" @click="nextPage">  還有下一頁<img src="@/assets/home/right_one.svg" alt=""></span><span v-else @click="nextPage">   沒有下一頁<img src="@/assets/home/right_two.svg" alt=""></span></div>
</div>

js

進行翻頁的時候 page--或者++ ...是淺拷貝 
上一頁prevPage() {if (this.currentPage > 0) {this.currentPage--this.formProps = {...this.contractArr[this.currentPage]}}else{this.$message({message: '沒有上一頁了',type: 'warning'});}
},
下一頁
nextPage() {if (this.currentPage < this.contractArr.length-1) {this.currentPage++this.formProps = {...this.contractArr[this.currentPage]}}else{this.$message({message: '沒有下一頁了',type: 'warning'});}
},
watch: {監聽 formProps 的變化 當他改變的時候就說明這個表格被填寫了 formProps: {handler:function(newval, oldval) {if(newval){let index = this.contractArr.findIndex(i => i.id == newval.id)if(index != -1){this.contractArr.splice(index, 1, newval)將這個新值對象替換之前的舊值對象這樣就拿到了新修改的值和其他未修改的值 直到全部賦值成新值}}},deep: true},這個是因為拿過來的值 包含小數點 所以進行監聽去除小數點'formProps.quality':{handler:function(newval, oldval) {this.formProps.quality = Number(this.formProps.quality)},deep: true},'formProps.speed':{handler:function(newval, oldval) {this.formProps.speed = Number(this.formProps.speed)},deep: true},'formProps.service':{handler:function(newval, oldval) {this.formProps.service = Number(this.formProps.service)},deep: true},},
最后可以使用 every 進行判斷若有一個不滿足條件,則返回false,后面的元素都不會再執行。不會對空數組進行檢測,不會改變原始數組這樣就可以知道哪些數據沒有填

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/43694.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/43694.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/43694.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

linux 進程堆棧分析

1.進程pid jsp -l | grep appName 或 ps -ef | grep appName 2.查看cpu top -c pidps -mp pid-o THREAD,tid,time / top -H -p pid #打印出進程對應的線程id及運行時間timeprintf %x\n 線程id3.查看gc jstat -gcutil | grep pid 500jstat -class pid4.查看進程日志 jsta…

數據分析案例-2024 年全電動汽車數據集可視化分析

&#x1f935;?♂? 個人主頁&#xff1a;艾派森的個人主頁 ?&#x1f3fb;作者簡介&#xff1a;Python學習者 &#x1f40b; 希望大家多多支持&#xff0c;我們一起進步&#xff01;&#x1f604; 如果文章對你有幫助的話&#xff0c; 歡迎評論 &#x1f4ac;點贊&#x1f4…

Navicat BI 教程 | 圖表設計和儀表板

商業智能&#xff08;Business Intelligence&#xff0c;BI&#xff09;是將數據轉化為可操作的洞察力的實踐&#xff0c;使組織能夠簡化生產力和實現更好的整體績效。本博客最近介紹了新的 Navicat BI&#xff0c;這是一個幫助 BI 專業人員通過創建數據可視化&#xff08;如圖…

侯捷C++面向對象高級編程(上)-11-虛函數與多態

1.虛函數 2.virtual 3.繼承&#xff0b;復合關系下的構造和析構 4.委托&#xff0b;繼承

Shell學習——Shell運算符

文章目錄 運算符算術運算符關系運算符布爾運算符邏輯運算符字符串運算符 運算符 算術運算符 #!/bin/bash a10 b20valexpr $a $b echo "a b : $val"valexpr $a - $b echo "a - b : $val"valexpr $a \* $b echo "a * b : $val"valexpr $b / $a…

C語言 | Leetcode C語言題解之第221題最大正方形

題目&#xff1a; 題解&#xff1a; int maximalSquare(char** matrix, int matrixSize, int* matrixColSize){int dp[301][301]{0};int wid0;if(matrixSize0&&matrixColSize[0]0){return 0;}for(int i0;i<matrixSize;i){for(int j0;j<matrixColSize[0];j){if(m…

Docker進入MongoDB

先是命令行開啟docker鏡像&#xff0c;然后進入docker鏡像&#xff0c;這是兩步 進入之后&#xff0c;開頭會變成root&#xff0c;我的理解是進入了另一個linux系統了&#xff0c;直接執行相應的軟件 這里直接use databse就是進入了&#xff0c;據說MongoDB是慢啟動&#xff0c…

MMGPL: 多模態醫學數據分析與圖提示學習| 文獻速遞-基于深度學習的多模態數據分析與生存分析

Title 題目 MMGPL: Multimodal Medical Data Analysis with Graph Prompt Learning MMGPL: 多模態醫學數據分析與圖提示學習 01 文獻速遞介紹 神經學障礙&#xff0c;包括自閉癥譜系障礙&#xff08;ASD&#xff09;&#xff08;Lord等&#xff0c;2018年&#xff09;和阿…

開發個人Go-ChatGPT–6 OpenUI

開發個人Go-ChatGPT–6 OpenUI Open-webui Open WebUI 是一種可擴展、功能豐富且用戶友好的自托管 WebUI&#xff0c;旨在完全離線運行。它支持各種 LLM 運行器&#xff0c;包括 Ollama 和 OpenAI 兼容的 API。 功能 由于總所周知的原由&#xff0c;OpenAI 的接口需要密鑰才…

C#字符串操作:判斷一個字符串是否存在于另一個字符串按特定字符分割后的子字符串中的幾種方法

要判斷一個字符串是否存在于另一個字符串按特定字符分割后的子字符串中&#xff0c;可以使用以下幾種方法&#xff1a; 方法一&#xff1a;使用Split和Array.Exists 你可以使用 Split 方法將字符串分割成子字符串數組&#xff0c;然后使用 Exists方法檢查目標字符串是否在數組…

Elasticsearch詳細介紹

B站對應視頻&#xff1a; Elasticsearch01-01.為什么學習elasticsearch_嗶哩嗶哩_bilibili 大多數日常項目&#xff0c;搜索肯定是訪問頻率最高的頁面之一。目前搜索功能是基于數據庫的模糊搜索來實現的&#xff0c;存在很多問題。 首先&#xff0c;查詢效率較低。 由于數據…

Java面試題:三個線程交替打印ABC如何實現?

目錄 方法一&#xff1a;使用synchronized和wait/notify方法二&#xff1a;使用CompletableFuture實現 方法一&#xff1a;使用synchronized和wait/notify package com.demo;import java.util.concurrent.CompletableFuture;public class PrintABC {// 當前狀態private static…

數據結構 Java DS——鏈表部分經典題目 (1)

前言 筆者計劃在暑假啃完JavaDS,Mysql的內容當然也會繼續更 這次給讀者們分享的是鏈表的幾個比較典型的題目,關于如何手搓一個鏈表,筆者還在籌劃中, 畢竟鏈表的種類也有那么多,但是在下面的題目中,只有單向鏈表 題目一 : 反轉鏈表 206. 反轉鏈表 - 力扣&#xff08;LeetCode…

什么是 VueQuill(前端的富文本編輯器)?

什么是 VueQuill&#xff1f; 1. 簡介 VueQuill 是 Vue.js 的一個富文本編輯器插件&#xff0c;它基于 Quill 編輯器構建&#xff0c;提供了簡潔且功能強大的富文本編輯功能。Quill 是一個現代化的富文本編輯器&#xff0c;提供豐富的文本編輯能力&#xff0c;支持多種格式和…

paddlenlp cpu windows 下測試gpt

paddlenlp 安裝python3.11版本 conda create -n python311 python3.11 激活python conda activate python311 安裝paddlepaddle conda install paddlepaddle3.0.0b0 -c paddle pip install paddlenlp3.0.0b0 -U -i https://pypi.tuna.tsinghua.edu.cn/simple windows下…

RockYou2024 發布史上最大密碼憑證

參與 CTF 的每個人都至少使用過一次臭名昭著的rockyou.txt單詞表&#xff0c;主要是為了執行密碼破解活動。 該文件是一份包含1400 萬個唯一密碼的列表。 源自 2009 年的 RockYou 黑客攻擊&#xff0c;創造了計算機安全歷史。 多年來&#xff0c;“rockyou 系列”不斷發展。…

爬蟲怎么實現抓取的

1.4爬蟲工程師常用的庫通過圖1-3我們了解到&#xff0c;爬蟲程序的完整鏈條包括整理需求、分析目標、發出網絡請求、文本解析、數據入庫和數據出庫。其中與代碼緊密相關的有&#xff1a;發出網絡請求、文本解析、數據入庫和數據出庫&#xff0c;接下來我們將學習不同階段中爬蟲…

C++OCR API減輕人們文字錄入的負擔

曾幾何時&#xff0c;許多大企業會設立文字錄入專員的崗位。相信有不少人第一份實習工作就是錄入資料&#xff0c;文檔、發票、證件等形形色色的文件堆積如山&#xff0c;日積月累的敲擊鍵盤&#xff0c;一張一張的錄入電腦系統。這種工作是枯燥的&#xff0c;可以練就文字錄入…

實驗01 黑盒測試方法(等價類劃分、邊界值分析)

一 實驗目的&#xff1a; 1、理解黑盒測試的定義&#xff1b; 2、掌握等價類劃分法&#xff1b; 3、掌握邊界值分析法。 二 實驗環境 1、Windows操作系統計算機&#xff1b; 三 實驗準備 1、理解黑盒測試的定義&#xff1b; 2、等價類劃分法原則&#xff1b; 3、邊界值分…

Java反射與Fastjson的危險反序列化

什么是Java反射&#xff1f; 在前文中&#xff0c;我們有一行代碼 Computer macBookPro JSON.parseObject(preReceive,Computer.class); 這行代碼是什么意思呢&#xff1f;看起來好像就是我們聲明了一個名為 macBookPro 的 Computer 類&#xff0c;它由 fastjson 的 parseObje…