码迷,mamicode.com
首页 > 其他好文 > 详细

vue_前端分页操作

时间:2019-10-19 14:39:58      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:ntp   style   col   cto   cli   func   column   时长   v-model   

<template>
<div>
<template>
<el-table
:data="currentPageData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%;line-height: 50px;">
<el-table-column
label="ID"
prop="filmId">
</el-table-column>

<el-table-column
label="预览图"
prop="imageId">
</el-table-column>

<el-table-column
label="电影名称"
prop="filmName">
</el-table-column>

<el-table-column
label="导演"
prop="director">
</el-table-column>

<el-table-column
label="电影时长(分)"
prop="duration">
</el-table-column>

<el-table-column
label="电影价格(元)"
prop="price">
</el-table-column>

<el-table-column
label="上映时间"
prop="date">
</el-table-column>


<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="small"
placeholder="搜索"></el-input>
</template>
<template slot-scope="scope">
<el-button type="primary" round
size="small "
@click="handleEdit(scope.$index, scope.row)">编辑
</el-button>
<el-button type="danger" round
size="small "
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!--分页代码-->
<div class="block">

<!--<el-select v-model="pageSize" placeholder="每页显示" size="mini" style="width: 120px" @blur="show(pageSize)">
<el-option>5条</el-option>
<el-option>10条</el-option>
<el-option>15条</el-option>
<el-option>20条</el-option>
</el-select>-->

<el-button type="primary" size="mini" @click="prevPage()">
上一页
</el-button>
<span>第{{currentPage}}页/共{{totalPage}}页</span>
<el-button type="primary" size="mini" @click="nextPage()">
下一页
</el-button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a>共<i>{{totalPage}}</i>页</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<el-button type="info" size="mini" @click="turn(currentPage)">跳转至</el-button><a>第</a>
<label><input type="text" style="width: 30px;" v-model="currentPage" @keyup.enter="turn(currentPage)"></label><a>页</a>

</div>


</div>
</template>

<script>
export default {
name: ‘FilmManage‘,
data () {
return {
search: ‘‘,
tableData: [], //所有数据
totalPage: 0, // 统共页数,默认为1
currentPage: 1, //当前页数 ,默认为1
pageSize: 7, // 每页显示数量
currentPageData: [] //当前页显示内容
}
},
components: {},
mounted(){},
created: function () {
var arr = this
arr.axios.get(‘film/listFilm‘)
.then((response) => {
console.log(response.data)//请求的返回体
arr.tableData = response.data
})
.catch((error) => {
console.log(error)//异常
})
arr.axios.get(‘film/count‘)
.then((response) => {
console.log(response.data)//请求的返回体
// 计算一共有几页
this.totalPage = Math.ceil(response.data/this.pageSize);
console.log(this.totalPage)

this.getCurrentPageData();
})
.catch((error) => {
console.log(error)//异常
})

},

methods: {
/*编辑和删除*/
handleEdit (index, row) {
console.log(index, row)
},
handleDelete (index, row) {
console.log(index, row)
},
/*分页操作*/
// 设置当前页面数据,对数组操作的截取规则为[0~9],[10~20]...,
// 当currentPage为1时,我们显示(0*pageSize+1)-1*pageSize,当currentPage为2时,我们显示(1*pageSize+1)-2*pageSize...
getCurrentPageData() {
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
this.currentPageData = this.tableData.slice(
begin,
end
);
},
//上一页
prevPage() {
console.log(this.currentPage);
if (this.currentPage === 1) {
return false;
} else {
this.currentPage--;
this.getCurrentPageData();
}
},
// 下一页
nextPage() {
if (this.currentPage === this.totalPage) {
return false;
} else {
this.currentPage++;
this.getCurrentPageData();
}
},
/*跳转*/
turn(currentPage) {
let begin = (currentPage - 1) * this.pageSize;
let end = currentPage * this.pageSize;
this.currentPageData = this.tableData.slice(
begin,
end
);
},
/*每页显示*/
show(size) {
let begin = (this.currentPage - 1) * size;
let end = this.currentPage * size;
this.currentPageData = this.tableData.slice(
begin,
end
);
},
},
}
</script>

<style scoped>

</style>

vue_前端分页操作

标签:ntp   style   col   cto   cli   func   column   时长   v-model   

原文地址:https://www.cnblogs.com/zwq20134/p/11703563.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!