正文
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);
},
}
