show-data页面

后台数据获取

• 通过路由将获取数据传递给页面

  ## index.page
//传递返回数据和关键字
this.$router.push({name:"showData",params:{"reponsData":reponse.result,"searchKeyword":reponse.keyword}});
## show-data page
props: ['reponsData'],

对数据进行分页展示

• 定义好一系列的计算属性，和用于展示的数据数组

 data() {
      return {
        currentPage:1,
      }
    },
    computed: {
    //用于展示分页数据的数组
        tableReponsData(){
          var startIndex=(this.currentPage-1)*this.pageSize;
          var endIndex=this.currentPage*this.pageSize;
         if(this.$props.reponsData){
          return this.$props.reponsData.slice(startIndex,endIndex);
         }else{
           return []
         }
        },
        searchKeyword(){
          if(this.$route.params.searchKeyword){
            return this.$route.params.searchKeyword
          }else{
            return "No keyword is submit"
          }
        },
        //设置展示数据的总条数
        reponseDataCount(){
          return this.$props.reponsData ? this.$props.reponsData.length:0;
        },
        //对于单页数据不显示分页
        handleSinglePage(){
            if(this.reponseDataCount<=this.pageSize){
              return true
            }else{
              return false
            }
        },
        //针对不同设备设置每页显示条目数目
        pageSize(){
          if(window.innerHeight<=650){
            return 3
          }else if(window.innerHeight<=1000){
            return 6
          }else{
            return 8
          }
        }
    },

• 分页中绑定对应的计算属性

      <el-row class="result-page" >
        <el-pagination 
        :hide-on-single-page="handleSinglePage"
        :page-size="pageSize"
        @current-change="handlecurrentPage"
        layout="prev, pager, next" 
        background :total="reponseDataCount">
        </el-pagination>

页码改变时调用对应的函数

• 页码改变时，将data中的页面改变，之后计算属性中会对要渲染的数据同步改变

    methods: {
      handlecurrentPage(val) {
        this.currentPage=val
      }
    },