zoukankan      html  css  js  c++  java
  • 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=" 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);
          },
        }    
  • 相关阅读:
    centos7.6 使用yum安装mysql5.7
    解决hadoop本地库问题
    docker-compose 启动警告
    docker 安装zabbix5.0 界面乱码问题解决
    docker 部署zabbix问题
    zookeeper 超时问题
    hbase regionserver异常宕机
    (转载)hadoop 滚动升级
    hadoop Requested data length 86483783 is longer than maximum configured RPC length
    zkfc 异常退出问题,报错Received stat error from Zookeeper. code:CONNECTIONLOSS
  • 原文地址:https://www.cnblogs.com/yangsg/p/10716774.html
Copyright © 2011-2022 走看看