# show-data页面

## 后台数据获取

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

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

## 对数据进行分页展示

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

```bash
 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
          }
        }
    },
```

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

```bash
      <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中的页面改变，之后计算属性中会对要渲染的数据同步改变

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zpliu.gitbook.io/booknote/qian-duan-cao-zuo/shi-li-lian-xi/dong-tai-sou-suo-wang-ye/qian-duan/vue/04-zhan-shi-shu-ju-zu-jian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.