【element-ui】elementUI 分页，后台没时间分开写接口，数据一次性传给前端，前端通过score进行区分，点击导航显示不同相应数据。

图片描述

接口数据http://www.easy-mock.com/mock...
后台没时间分开写接口，数据一次性传给前端，目前点击全部评价已正常加载数据显示数据到页面。
请问点击好评 与 中评 差评 如何写，elementUI tab导航条点击任何一个都会触发handleclick方法，请问大神在这个方法如何实现点击不同导航跳转到不同导航并显示相应数据，先谢谢！ 项目不支持import导入
只有通过score评分区分

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

},
通过

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

      style="width: 100%">
     <!--------------------标题部分------------>
    <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="评价内容"
    width="180px">
  </el-table-column>
    <el-table-column
    prop="time"
    label="时间">
  </el-table-column>
</el-table>
<!--------------------标题结束部分------------>

<!---------------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>

<!-- 分页导航-->

<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: {
/*    ----分页组件 每页数据发生改变时执行start----------*/
handleCurrentChange(val){
    this.current_page = val;
    this.getData()
  },
/*    ----分页组件 每页条数发生改变时执行 end----------*/

/----分页组件 每页条数发生改变时执行start----------/

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

/ ----分页组件 每页条数发生改变时执行 end----------/

/*    ----tab导航切换时调用此函数 start----------*/
    handleClick(tab, event) {
        console.log(tab, event); },
    /*    ----tab导航切换时调用此函数 end------------*/

// 从后台请求数据的方法 &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;
            }
        })
}    
}

})

回答：

全部数据 datalist
类型 type 全部 好 中 差
计算属性 tableData 根据type和datalist用 Array.filter 方法过滤数据
watch type，变化的时候 pageIndex 设置为1
计算属性 pageData 根据 pageIndex 和 tableData 用 Array.slice 方法 分页

以上是 【element-ui】elementUI 分页，后台没时间分开写接口，数据一次性传给前端，前端通过score进行区分，点击导航显示不同相应数据。 的全部内容， 来源链接： utcz.com/a/151770.html

回到顶部