本次数据采用的是本地数据导入的方式. 也可以通过请求API数据的方式.但是操作之前需要处理跨域.
此次案例使用的数据是https://www.layui.com/demo/table/user/?page=1&limit=1000.
<template>
<div class="box">
<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column
v-for= 'title in titles'
:prop="title"
:label="title"
width="180" border="1px solid #ccc">
</el-table-column>
<el-table-column
fixed="left"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="datatitle">
</el-pagination>
</div>
</div>
</template>
<script>
import ticket from '../data/ticket.json' //导入数据
// console.log(ticket)
export default{
data(){
return{
titles:[ "id", "username", "sex", "city", "sign", "experience", "logins", "wealth", "classify", "score"],
mydatas:ticket.data,
tableData:ticket.data.slice(0,10),
currentPage:1,
pagesize:10,
datatitle:0,
}
},
methods: {
gettotal(){
this.datatitle = this.mydatas.length
},
changelist(){
var x = (this.currentPage-1)*this.pagesize
var y = this.currentPage*this.pagesize
console.log(x,y)
this.tableData = this.mydatas.slice(x,y)
},
handleSizeChange(val) {
this.pagesize = val
console.log(`每页 ${val} 条`);
this.changelist()
},
handleCurrentChange(val) {
this.currentPage = val
console.log(`当前页: ${val}`);
this.changelist()
}
},
mounted() {
this.gettotal()
}
}
</script>
<style>
.box{
margin:10px auto;
}
</style>
运行效果