Parcourir la source

分页第一次

huangwenhao il y a 7 mois
Parent
commit
4d9be57513
3 fichiers modifiés avec 33 ajouts et 32 suppressions
  1. BIN
      src/assets/搜索框.png
  2. 14 13
      src/components/examine.vue
  3. 19 19
      src/components/list.vue

BIN
src/assets/搜索框.png


+ 14 - 13
src/components/examine.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="examine-container">
+  <div>
     <div class="examine">
       <div class="examine_title1">
         <a @click="showPending" :style="{ color: isPending ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">待审核({{ tableData.length }})</a>
@@ -43,9 +43,9 @@
             </template>
           </el-table-column>
         </el-table>
-        
+      </div>
         <!-- 分页组件 -->
-        <el-pagination 
+        <el-pagination v-if="Pending_request"
           :current-page="currentPage" 
           :page-size="pageSize" 
           :page-sizes="pageSizeOptions"
@@ -129,7 +129,6 @@
  
 
     </div>
-</div>
 </template>
 
 <script>
@@ -160,6 +159,7 @@ export default {
       approvedData: [],
       RefusedData: [],
       AllData: [],
+      Pending_request:true,
       isPending: true, // 初始状态为待审核
       isApproved: false,
       isRefused: false,
@@ -288,10 +288,12 @@ export default {
       this.isApproved = false;
       this.isRefused = false;
       this.isAll = false;
+      this.Pending_request=true;
     },
     // 已通过
     showApproved() {
       console.log("Clicked Approved!");
+      this.Pending_request=false;
       this.isPending = false;
       this.isApproved = true;
       this.isRefused = false;
@@ -304,6 +306,7 @@ export default {
       this.isApproved = false;
       this.isRefused = true;
       this.isAll = false;
+      this.Pending_request=false;
     },
     //全部记录
     showAll() {
@@ -311,6 +314,7 @@ export default {
       this.isApproved = false;
       this.isRefused = false;
       this.isAll = true;
+      this.Pending_request=false;
     },
     // 用于切换组织
     selectOrg(org) {
@@ -1096,9 +1100,6 @@ hr {
   /* 调整分页组件的顶部向上方距离50px */
 }
 
-
-
-
 /* 设置分页按钮的宽度 */
 .el-pagination .el-pagination__prev,
 .el-pagination .el-pagination__next {
@@ -1122,12 +1123,12 @@ hr {
 .el-checkbox {
   margin-right: none !important;
 }
-
-
-
-
-
-
+.cell{
+  position: absolute;
+}
+.el-checkbox span {
+    margin-left: 3px;
+}
 /* 取消 ElTableColumn 默认的 inline-block 和 vertical-align 样式 */
 .el-scrollbar__view {
   display: block !important;

+ 19 - 19
src/components/list.vue

@@ -69,7 +69,7 @@
       <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" width="200" />
       <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" width="200" />
       <el-table-column show-overflow-tooltip prop="name" label="姓名" width="200" />
-      <el-table-column show-overflow-tooltip prop="account" label="账户" width="220" />
+      <el-table-column show-overflow-tooltip prop="account" label="账户" width="250" />
       <el-table-column fixed="right" label="操作" width="250">
         <template slot-scope="{ row }">
           <el-button link type="text" size="small" @click="ajax__open_stop(row.userid)">停用</el-button>
@@ -204,9 +204,6 @@ export default {
     }
   },
   methods: {
-    onSubmit() {
-      console.log('submit!');
-    },
    // 移动按钮,将isOrgFormVisible区域显示
    run() {
       this.isOrgFormVisible = true;
@@ -242,14 +239,7 @@ export default {
       this.up_page = false;
       this.down_page = true;
     },
-    // 处理每页条目数量变化
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    // 处理当前页变化
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    },
+    
     // 页码扩展按钮
     handlePageChange(page) {
       this.currentPage = page;
@@ -486,9 +476,8 @@ body{
 .button_top{
   width: 450px;
   /* border: 1px solid red; */
-  height: 60px;
+  height: 35px;
   margin-left: 120px;
-  margin-top: 30px;
   letter-spacing: 2px; /* 设置字母间距为 2 像素 */
 }
 .button_top a{
@@ -530,7 +519,7 @@ body{
   color: black;
   font-weight: bold;
   margin-left: -890px;
-  margin-top: 80px;
+  margin-top: 53px;
   float: left;
 }
 
@@ -589,6 +578,10 @@ body{
 .el-checkbox:last-of-type {
   margin-right: 28px; /* 自定义你的间距 */
 }
+.el-checkbox span{
+  margin-left: 40px;
+}
+
 .checkbox-left {
   flex-direction: row-reverse; /* 选择框在右侧 */
   display: flex; /* 使用 Flexbox */
@@ -607,9 +600,6 @@ body{
   bottom: 0; /* 距离底部 */
   left: 5%; /* 调整下划线的水平位置,设置为10% */
 }
-.el-checkbox span{
-  margin-left: 40px;
-}
 /* 组织名称 */
 .checkbox-company {
   margin-top: 60px; /* 可选:设置顶部间距 */
@@ -725,7 +715,7 @@ body{
 .Pagetion {
   width: auto;
   height: 60px;
-  margin-top: 30px;
+  /* margin-top: 30px; */
   margin-left: 200px;
   float: left;
 }
@@ -757,4 +747,14 @@ body{
   border: 1px solid rgb(225, 225, 225);
   background-color: rgb(255, 255, 255);
 }
+.el-table .el-table__cell {
+    padding: 12px 0;
+    min-width: 0;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    position: relative;
+    text-align: left;
+    height: 80px;
+}
 </style>