1. 程式人生 > >關於如何利用計算屬性進行button的控制

關於如何利用計算屬性進行button的控制

 

element分頁沒用它的 (這個只要上一頁下一頁),比如共2頁的時候,你在第一頁,你肯定可以點選下一頁,當你進入到第二頁的時候這個button肯定就不能點選了啊,它的屬性diaabled=true讓他不能點選

實現方法就是用的computed

示例程式碼如下

<div class="page">
<span class="first-sapn">共<span style="color: #FF795E">{{totalNum}}</span>件商品</span>
<el-button>上一頁</el-button>
<el-button type="primary" @click="nextPage" :disabled="isdisabledFn">
下一頁</el-button>
<span class="last-sapn">共<span style="color: #FF795E">{{total}}</span>頁</span>
</div>

 

 

上面這張圖是後端只返回了一個size(總共好多條資料),根據這個自己去計算有好多頁Math.ceil(size/每頁顯示多少條)

//      點選下一頁
nextPage(){
console.log(222)
if(this.page<this.total){
this.page++ }else {
this.next=true
}

}

 ==============關鍵的計算屬性來了=====================

computed:{
isdisabledFn(){
if(this.page<this.total){
return this.next=false
}else {
return this.next=true
}
},
},