wulin/management_UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加分页

Browse Source
This commit is contained in:
zhujida 2021-01-21 16:19:12 +08:00
parent 2b30cfbfe8
commit 654de5b250
1 changed files with 46 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/views/kpi/set/target/index.vue
View File

@ -105,10 +105,12 @@
</el-table-column>
</el-table>
</div>
<div class="target-main-content-handle">
<div
@click="menuDataClasseHide = !menuDataClasseHide"
class="target-main-content-hide"
class="target-main-content-handle-hide"
><i :class="menuDataClasseHide?'el-icon-arrow-right':'el-icon-arrow-left'"></i></div>
</div>
<div class="target-main-content-right">
<el-table
:data="tableData"
@ -146,6 +148,18 @@
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="this.tablePage.currPage>1"
@size-change="handlePageSizeChange"
@current-change="handlePageCurrentChange"
:current-page.sync="tablePage.currPage"
:page-size="tablePage.pageSize"
:page-sizes="[20,50,100]"
layout="sizes, prev, pager, next"
:total="tablePage.totalCount"
class="target-main-content-right-page"
>
</el-pagination>
</div>
</div>
</div>
@ -351,7 +365,15 @@ export default {
this.queryData.type = val ? val.id : -1
this.handleGetMenuList(this.queryData.type)
},
handlePageCurrentChange (val) {
// 页面
this.tablePage.currPage = val
this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name, val)
},
handlePageSizeChange (val) {
this.tablePage.pageSize = val
this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name, this.tablePage.currPage)
},
handleGetMenuList (type = -1) {
// type 类型
// 指标分类列表
@ -388,7 +410,7 @@ export default {
this.queryData.indicatorType = indicatorType
let para = {
currPage: currPage,
pageSize: 20,
pageSize: this.tablePage.pageSize,
name: name
}
if (indicatorType !== -1) {
@ -499,27 +521,36 @@ export default {
&-content {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
overflow: hidden;
&-left {
display: flex;
.el-table {
width: 200px;
border: 0.5px solid @borderColor;
}
}
&-handle {
display: flex;
align-items: center;
&-hide {
color: #fff;
background-color: @borderColor;
width: 12px;
height: 20px;
margin-right: 10px;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
}
&-right {
flex: 1;
border: red;
&-page {
flex: 1;
text-align: center;
margin-top: 10px;
}
}
}
}