|
@@ -1,7 +1,14 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<div>
|
|
|
|
+ <div class="batch_button">
|
|
|
|
+ <el-button class="export" @click="exportData">导出数据</el-button>
|
|
|
|
+ <el-button class="disabled" @click="batchActivate">批量禁用</el-button>
|
|
|
|
+ <el-button class="delete" @click="batchDelete">批量删除</el-button>
|
|
|
|
+ </div>
|
|
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
|
|
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
|
|
- :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 98%"
|
|
|
|
|
|
+ :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
|
|
|
|
+ height="405"
|
|
|
|
+ style="width: 100%"
|
|
@selection-change="handleSelectionChange">
|
|
@selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" width="50">
|
|
<el-table-column type="selection" width="50">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
@@ -27,17 +34,10 @@
|
|
<el-table-column prop="operation" label="操作">
|
|
<el-table-column prop="operation" label="操作">
|
|
<el-button size="mini" type="text">查看</el-button>
|
|
<el-button size="mini" type="text">查看</el-button>
|
|
<el-button size="mini" type="text">编辑</el-button>
|
|
<el-button size="mini" type="text">编辑</el-button>
|
|
- <el-button size="mini" type="text">激活</el-button>
|
|
|
|
|
|
+ <el-button size="mini" type="text">删除</el-button>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
<div class="bottom">
|
|
<div class="bottom">
|
|
- <div class="bottom_button">
|
|
|
|
- <el-button class="delete" type="text">批量删除</el-button>
|
|
|
|
- <el-divider direction="vertical"></el-divider>
|
|
|
|
- <el-button class="disabled" type="text">批量激活</el-button>
|
|
|
|
- <el-divider direction="vertical"></el-divider>
|
|
|
|
- <el-button class="export" type="text">导出数据</el-button>
|
|
|
|
- </div>
|
|
|
|
<page class="page" :paginationData="paginationData"></page>
|
|
<page class="page" :paginationData="paginationData"></page>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -86,9 +86,11 @@ export default {
|
|
this.tableData = [];
|
|
this.tableData = [];
|
|
getUserList(
|
|
getUserList(
|
|
0,
|
|
0,
|
|
- page
|
|
|
|
|
|
+ page,
|
|
|
|
+ this.currentPageSize
|
|
).then((res) => {
|
|
).then((res) => {
|
|
if (res.data.code === 0 && res.data.data.length > 0) {
|
|
if (res.data.code === 0 && res.data.data.length > 0) {
|
|
|
|
+ this.paginationData.total = res.data.total;
|
|
this.tableData = res.data.data.map((e) => {
|
|
this.tableData = res.data.data.map((e) => {
|
|
return {
|
|
return {
|
|
username: e.name,
|
|
username: e.name,
|
|
@@ -121,13 +123,10 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.el-table {
|
|
.el-table {
|
|
- position: absolute;
|
|
|
|
- top: 60px;
|
|
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 50px;
|
|
left: 0;
|
|
left: 0;
|
|
- margin-left: 1%;
|
|
|
|
- height: 400px;
|
|
|
|
border: 1px solid #f0f2f2;
|
|
border: 1px solid #f0f2f2;
|
|
- margin-top: 10px;
|
|
|
|
font-size: 0.95rem;
|
|
font-size: 0.95rem;
|
|
font-family: PingFang SC;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
@@ -178,38 +177,58 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-.bottom {
|
|
|
|
- position: absolute;
|
|
|
|
- bottom: 10px;
|
|
|
|
- left: 50px;
|
|
|
|
- height: 50px;
|
|
|
|
- width: 95%;
|
|
|
|
- line-height: 20px;
|
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
|
- text-align: center;
|
|
|
|
|
|
+.batch_button {
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 50px;
|
|
|
|
+ float: left;
|
|
|
|
+ left: 280px;
|
|
|
|
|
|
- .bottom_button {
|
|
|
|
|
|
+ .export {
|
|
|
|
+ padding: 3px;
|
|
|
|
+ width: 80px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ bottom: 15px;
|
|
position: absolute;
|
|
position: absolute;
|
|
- left: 20px;
|
|
|
|
- margin-top: 15px;
|
|
|
|
-
|
|
|
|
- .delete {
|
|
|
|
- font-size: 14px;
|
|
|
|
- text-align: center;
|
|
|
|
- padding: 1px;
|
|
|
|
- }
|
|
|
|
|
|
+ color: #fff;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ right: 190px;
|
|
|
|
+ background-color: #2ea8e6;
|
|
|
|
+ }
|
|
|
|
|
|
- .disabled {
|
|
|
|
- font-size: 14px;
|
|
|
|
- text-align: center;
|
|
|
|
- padding: 1px;
|
|
|
|
- }
|
|
|
|
|
|
+ .disabled {
|
|
|
|
+ padding: 3px;
|
|
|
|
+ width: 80px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ bottom: 15px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ color: #fff;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ right: 100px;
|
|
|
|
+ background-color: #2ea8e6;
|
|
|
|
+ }
|
|
|
|
|
|
- .export {
|
|
|
|
- font-size: 14px;
|
|
|
|
- text-align: center;
|
|
|
|
- padding: 1px;
|
|
|
|
- }
|
|
|
|
|
|
+ .delete {
|
|
|
|
+ padding: 3px;
|
|
|
|
+ width: 80px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ bottom: 15px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ color: #fff;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ right: 10px;
|
|
|
|
+ background-color: #b3b3b3;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.bottom {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 20px;
|
|
|
|
+ right: 16px;
|
|
|
|
+ bottom: 20px;
|
|
|
|
+ height: 50px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|