在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ elementUI 分頁,后臺沒時間分開寫接口,數(shù)據(jù)一次性傳給前端,前端通過sc

elementUI 分頁,后臺沒時間分開寫接口,數(shù)據(jù)一次性傳給前端,前端通過score進行區(qū)分,點擊導(dǎo)航顯示不同相應(yīng)數(shù)據(jù)。

圖片描述

接口數(shù)據(jù)http://www.easy-mock.com/mock...
后臺沒時間分開寫接口,數(shù)據(jù)一次性傳給前端,目前點擊全部評價已正常加載數(shù)據(jù)顯示數(shù)據(jù)到頁面。
請問點擊好評 與 中評 差評 如何寫,elementUI tab導(dǎo)航條點擊任何一個都會觸發(fā)handleclick方法,請問大神在這個方法如何實現(xiàn)點擊不同導(dǎo)航跳轉(zhuǎn)到不同導(dǎo)航并顯示相應(yīng)數(shù)據(jù),先謝謝! 項目不支持import導(dǎo)入
只有通過score評分區(qū)分

handleClick(tab, event) {
        console.log(tab, event);

},
通過

<el-table :data="tableData.slice((current_page-1)pagesize,current_pagepagesize)"

      style="width: 100%">
     <!--------------------標(biāo)題部分------------>
    <el-table-column
    prop="img"
    label="顧客頭像"
    width="180px">
  </el-table-column>
  
    <el-table-column
    prop="name"
    label="用戶姓名">
  </el-table-column>
  

<el-table-column

    prop="desc"
    label="評價內(nèi)容"
    width="180px">
  </el-table-column>

    <el-table-column
    prop="time"
    label="時間">
  </el-table-column>
</el-table>
<!--------------------標(biāo)題結(jié)束部分------------>

<!---------------table表格開始------------- -->

</el-tab-pane>
<el-tab-pane label="好評" name="second"></el-tab-pane>
<el-tab-pane label="中評" name="third" ></el-tab-pane>
<el-tab-pane label="差評" name="fourth"></el-tab-pane>

<!-- 分頁導(dǎo)航-->

<div class="block">

<el-pagination

   @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :page-zise='pagesize'
  :current-page='current_page'
layout="prev, pager, next"
:total="total">

</el-pagination>
</div>

  </el-tabs>

new Vue({

el: '#customer-evaluation',
data() {
    return {
        pagesize:15,
        current_page:1,
        page:1,
        total:0,
        activeName:"first",
        tableData: [
        ]
    };
},
mounted:function(){
    this.getData()
},
methods: {
/*    ----分頁組件 每頁數(shù)據(jù)發(fā)生改變時執(zhí)行start----------*/
handleCurrentChange(val){
    this.current_page = val;
    this.getData()
  },
/*    ----分頁組件 每頁條數(shù)發(fā)生改變時執(zhí)行 end----------*/

/----分頁組件 每頁條數(shù)發(fā)生改變時執(zhí)行start----------/

  handleSizeChange(val){
   this.pagesize = val;
    this.getData() 
  },

/ ----分頁組件 每頁條數(shù)發(fā)生改變時執(zhí)行 end----------/

/*    ----tab導(dǎo)航切換時調(diào)用此函數(shù) start----------*/
    handleClick(tab, event) {
        console.log(tab, event); },
    /*    ----tab導(dǎo)航切換時調(diào)用此函數(shù) end------------*/

// 從后臺請求數(shù)據(jù)的方法 &per_page=15&page=1

    getData(per_page,current_page){
        var _this = this

//var url ="http://www.easy-mock.com/mock/59c7d870e0dc663341b78e57/example_1506269296641/bymadmin.me/api&per_page=1&page=1"&per_page="+this.pagesize+"&page="+this.page;
var url ="http://www.easy-mock.com/mock/59c7d870e0dc663341b78e57/example_1506269296641/bymadmin.me/api";
axios.get(url,{

         params:{
            per_page: this.pagesize,
            current_page: this.current_page,
         }
   }) 
        .then((res)=>{
            if(res.data.code ==0){
                this.total = res.data.comments.total;
                // console.log(typeof res.data) object
                 for(var i = 0;i < res.data.comments.data.length;i++){
                     console.log('------------------------')
                   var obj = {};
                      obj.time =  res.data.comments.data[i].wechat_user.created_at;
                      obj.name =  res.data.comments.data[i].wechat_user.name;
                    res.data.comments.data[i] = obj;
                  }
                 _this.tableData = res.data.comments.data;
                 _this.total = res.data.comments.total;
            }
        })
}    
}

})

回答
編輯回答
尛曖昧

全部數(shù)據(jù) datalist
類型 type 全部 好 中 差
計算屬性 tableData 根據(jù)type和datalist用 Array.filter 方法過濾數(shù)據(jù)
watch type,變化的時候 pageIndex 設(shè)置為1
計算屬性 pageData 根據(jù) pageIndex 和 tableData 用 Array.slice 方法 分頁

2018年4月15日 03:24