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,后面的元素都不會再執行。不會對空數組進行檢測,不會改變原始數組這樣就可以知道哪些數據沒有填