<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
:show-header="true"
:height="$store.state.clientHeight - 134"
:header-cell-style="tableHeaderStyle"
style="width: 100%; overflow-y: auto;">
<el-table-column type="selection" width="60" align="center"/>
<el-table-column label="ID" prop="id" align="center" sortable/>
<el-table-column label="应用系统名称" prop="businessSystemName" align="center" sortable/>
<el-table-column label="资源申请类型" prop="resourceRequestType" align="center" sortable/>
<el-table-column label="申请组件" prop="applicationcomponent" sortable/>
<el-table-column label="订单状态" prop="orderStatus" sortable/>
<el-table-column label="申请提交日期" prop="date" sortable/>
<el-table-column label="审批结束日期" prop="enddate" sortable/>
<el-table-column label="选项" width="120" align="center">
<template slot-scope="{row}">
<el-button type="primary" size="small" @click="showDetail(row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10, 20, 30, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length" class="fy">
</el-pagination>
export default {
data() {
return {
// 当前页
currentPage: 1,
// 每页多少条
pageSize: 5,
date: '',
tableData: [],
search: '',
options: [],
value: '',
list: '',
componentlist: [],
statuslist: []
}
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
},
handleCurrentChange(val) {
this.currentPage = val;
}
}
}
</script>
css
.fy{
text-align:right;
margin-top:30px;
}