<template>
<div class="container">
<div class="breadcrumb">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>个人中心</el-breadcrumb-item>
<el-breadcrumb-item>我的订阅</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="content">
<div class="box">
<div style="width:100%;height: calc(100% - 2.5rem)">
<!-- :header-cell-style="{background:'#d5f5ff',color:'#49b8de'}"
-->
<el-table
v-loading="tableLoading"
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
border height="100%">
<el-table-column
sortable
prop="name"
label="订阅产品"
width="180">
</el-table-column>
<el-table-column
sortable
prop="extent"
label="订阅范围"
width="180">
</el-table-column>
<el-table-column
sortable
prop="time"
label="订阅时间">
</el-table-column>
<el-table-column
sortable
label="当前状态"
align="center"
prop="status"
min-width="150"
>
<template slot-scope="scope">
<el-tag style="font-size: .5rem;" :type="formatType(scope.row.status)">{{formatVal(scope.row.status)}}
</el-tag>
</template>
</el-table-column>
<el-table-column
min-width="140"
label="操作"
align="center">
<template slot-scope="scope">
<el-button size="small" type="primary" @click="down(scope.row)"
style="margin-right: .5rem" plain>下载
</el-button>
<el-button size="small" type="primary" @click="cancel(scope.row)"
plain>取消
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div style="height: 2.5rem;display: flex;align-items:center;justify-content: flex-end">
<el-pagination
small
background
@current-change="pageChange"
:current-page="currentPage"
layout="total,prev, pager, next"
:page-size="pageSize"
:pager-count="pageSize"
:total="totalPage">
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "accountInfo",
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
extent: '上海市普陀区金沙江路 1517 弄',
status: 0,
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
status: 1,
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
status: 2,
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
status: 3,
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
],
tableLoading: false,
totalPage: 30,
pageSize: 10,
currentPage: 1,
}
},
methods: {
pageChange(currentPage) {
this.currentPage = currentPage;
},
formatType(val) {
if (val == 0) {
return "success";
} else if (val == 1) {
return "danger";
} else if (val == 2) {
return "primary";
} else if (val == 3) {
return "info";
}
},
formatVal(val) {
if (val == 0) {
return "成功";
} else if (val == 1) {
return "失败";
} else if (val == 2) {
return "运行";
} else if (val == 3) {
return "未运行";
}
},
get(searchVal) {
this.tableLoading = true;
this.graph && this.graph.destroy();
this.graphData = null;
get({
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
...this.searchForm,
}
}).then(res => {
this.tableLoading = false;
this.tableData = res.data.data.records || [];
this.total = res.data.data.total || 0;
// if (this.tableData && this.tableData[0] && !searchVal) {
// this.view(this.tableData[0])
// }
if (this.tableData && this.tableData[0]) {
this.view(this.tableData[0]);
this.$refs['table'].setCurrentRow(this.tableData[0])
}
})
},
}
}
</script>
<style scoped>
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 1rem;
}
.breadcrumb {
}
.content {
flex: 1;
padding:1rem;
overflow: hidden; //表格高度生效
}
.box {
width: 100%;
height: 100%;
padding: 3rem;
}
</style>
标签：name,普陀区,王小虎,element,ui,date,2016,05,模板 From： https://www.cnblogs.com/bruce-lee-blog/p/17523145.html