<template>
<div>
<el-table
ref="filterTable"
:data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)">
<el-table-column
prop="date"
label="创建日期"
sortable
width="180"
column-key="date">
</el-table-column>
<el-table-column prop="createBy" label="创建人" :formatter="createBy"></el-table-column>
<el-table-column
align="left">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEnter(scope.$index, scope.row)">Enter</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background
layout="prev, pager, next, sizes, total, jumper"
:page-sizes="[5, 10, 15, 20]"
:page-size="pagesize"
:total="this.tableData.length"
@current-change="handleCurrentChange"
@size-change="handleSizeChange">
</el-pagination>
</div>
</template>
<script>
export default {
name: "select",
data() {
return {
pagesize: 10,
currpage: 1,
tableData: []
}
},
created() {
this.tableData = [
{
id: '001',
date: '2016-05-02',
createby: 'xxxx',
}]
},
methods: {
// 数据填充
createBy(row, column) {
return row.createby;
},
// 切换页 方法
handleCurrentChange(cpage) {
this.currpage = cpage;
},
handleSizeChange(psize) {
this.pagesize = psize;
},
// 进入某个选项
handleEnter(index, row) {
console.log(row.id)
},
}
}
</script>
<style scoped>
.el-table {
width: 100%;
}
.el-pagination {
margin-top: 20px;
margin-left: 10px;
}
</style>
————————————————
版权声明:本文为CSDN博主「ttt_tangyuan」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/tangyuan0217/article/details/104432574
静态elementUI 表格+分页器 展示数据
猜你喜欢
转载自blog.csdn.net/m0_49714202/article/details/121760766
今日推荐
周排行