vue-cli 3.0 豆瓣api接口使用element做分页

记录自己的学习 大佬绕道谢谢！

豆瓣即将上映接口：https://api.douban.com/v2/movie/coming_soon

本地跨域问题 看我之前的文章：https://www.cnblogs.com/yangsg/p/10633385.html

因为之前用过element UI写过分页相关业务代码 但是时间久了就淡忘了 所以总结下来 方便下次的使用

可以看到接口返回的字段有：

count：表示返回几条数据

start：表示从哪条开始

total：表示总数

subjects：表示数据的详细

我们这里使用的是element UI的 Pagination 分页 + table表格

因为豆瓣返回的是 count 和 start 我们使用这两个字段去做分页

使用了watch监听 satrt 如果satrt变化 则调用init函数

sizechange函数 里面val是我按钮点击的数字 （或者理解为里面的按钮）

页面的截图：

下面看代码：

<el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop=""
          label="序号"
          width="180">
          <template slot-scope='scope'>{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column
          prop="original_title"
          label="标题"
          width="180">
        </el-table-column>
        <el-table-column
          prop="genres"
          label="类型"
          width="180">
          <template slot-scope="scope">{{ scope.row.genres.join('&') }}</template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="id">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleDele(scope.$index,tableData)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" @current-change="sizeChange" :page-size="pageSize"
                      :total="listTotal" class="paginaRight">
      </el-pagination>

data(){
    return{
        pageSize:5,
        listTotal:null,
        listParams:{
          start: 0,
          count: 5
        },
        tableData:null
      }
}

mounted(){
      this.init();
    },
    watch:{
      start(val){
        this.init(val)
      }
    },
    methods: {
      handleDele(index,data){
        //删除当前的row
        this.$confirm('此操作删除当前行，是否继续？','提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(()=>{
          data.splice(index,1)
          this.$message({
            type:'success',
            message:'删除成功'
          })
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'已取消删除'
          })
        })

      },
      init(){
        const url= '/api/movie/coming_soon';
        this.$http.post(url,{...this.listParams}).then((res)=>{
          this.listTotal = res.data.total;
          this.tableData = res.data.subjects
        })
      },
      sizeChange(val){
        this.listParams.start =  this.listParams.count*val;
        this.init(this.listParams);
      },
    }