表格分页序号翻页增加,以及查询表单与表格距离调整

src/components/ListPage.vue

@@ -4,7 +4,7 @@
  * @Autor: pan
  * @Date: 2024-03-12 14:01:57
  * @LastEditors: pan
- * @LastEditTime: 2024-03-29 20:23:32
+ * @LastEditTime: 2024-04-01 10:35:02
 -->
 <template>
   <div class="list-page">
@@ -45,7 +45,7 @@ export default {
   box-sizing: border-box;
   .operation-wrap {
     display: flex;
-    padding: 10px 0;
+    padding: 14px 0;
     box-sizing: border-box;
   }
   .table-wrap {

src/components/TableConfig.vue

@@ -4,7 +4,7 @@
  * @Autor: pan
  * @Date: 2024-03-11 14:53:40
  * @LastEditors: pan
- * @LastEditTime: 2024-03-27 17:22:37
+ * @LastEditTime: 2024-04-01 10:28:05
 -->
 <!-- 示例
  columns: [{ label: '头像', prop: 'avatar', align: 'center', __slotName: 'avatar',callback: (row, title) => {
@@ -60,9 +60,17 @@
             <span v-html="item.callback && item.callback(scope.row)"></span>
           </template>
         </el-table-column> -->
+        <el-table-column
+          v-if="item.type === 'index'"
+          v-bind="item"
+          align="center"
+          :key="item"
+          :index="indexMethod"
+        >
+        </el-table-column>
         <!-- 操作列 -->
         <el-table-column
-          v-if="item.type === 'operation'"
+          v-else-if="item.type === 'operation'"
           :key="item.prop"
           v-bind="item"
           align="center"
@@ -218,6 +226,12 @@ export default {
     this.queryData()
   },
   methods: {
+    indexMethod(index) {
+      return (
+        (this.pagination.current - 1) * this.pagination.pageSize + index + 1
+      )
+    },
+
     clearSelection() {
       this.$refs.tableConfig.clearSelection()
     },

src/views/archiEleRela/index.vue

@@ -98,6 +98,7 @@
           type="index"
           label="序号"
           width="80"
+          :index="indexMethod"
           align="center"
         ></el-table-column>
         <el-table-column
@@ -353,20 +354,20 @@
                   ></el-option>
                 </el-select>
               </div>
-              <div class="newBtn">
+              <div class="newBtn" style="display: flex">
                 <el-button
                   class="addItem"
-                  icon="el-icon-plus"
+                  icon="el-icon-minus"
                   circle
-                  @click="operateDia('add')"
-                  v-if="formData.arrList.length == index + 1"
+                  @click="operateDia('del', index)"
+                  v-if="formData.arrList.length > 1"
                 ></el-button>
                 <el-button
                   class="addItem"
-                  icon="el-icon-minus"
+                  icon="el-icon-plus"
                   circle
-                  @click="operateDia('del')"
-                  v-else
+                  @click="operateDia('add')"
+                  v-if="formData.arrList.length - 1 == index"
                 ></el-button>
               </div>
             </div>
@@ -733,6 +734,9 @@ export default {
   },
   created() {},
   methods: {
+    indexMethod(index) {
+      return (this.params.current - 1) * this.params.pageSize + index + 1
+    },
     queryAllKey() {
       //查询控件右边的下拉框值
       gAllDictKey().then((res) => {
@@ -1164,7 +1168,7 @@ export default {
     },
 
     // 对话表格操作
-    operateDia(type) {
+    operateDia(type, index) {
       switch (type) {
         // 添加
         case 'add':
@@ -1176,7 +1180,7 @@ export default {
           break
         // 删除
         case 'del':
-          this.formData.arrList.splice(this.formData.arrList.length - 1, 1)
+          this.formData.arrList.splice(index, 1)
           break
       }
     },
@@ -1323,8 +1327,8 @@ export default {
 .search_btn {
   width: 100%;
   display: flex;
-  margin-top: 50px;
-  margin-bottom: 20px;
+  margin-top: 14px;
+  margin-bottom: 14px;
 }
 .add_btn {
   display: flex;

src/views/etpManage/index.vue

@@ -93,6 +93,7 @@
           type="index"
           label="序号"
           width="80"
+          :index="indexMethod"
           align="center"
         ></el-table-column>
         <el-table-column
@@ -389,6 +390,9 @@ export default {
     this.getList()
   },
   methods: {
+    indexMethod(index) {
+      return (this.pager.current - 1) * this.pager.size + index + 1
+    },
     search_table() {
       //搜索
       this.pager.current = 1
@@ -769,8 +773,8 @@ export default {
 .search_btn {
   width: 100%;
   display: flex;
-  margin-top: 50px;
-  margin-bottom: 20px;
+  margin-top: 14px;
+  margin-bottom: 14px;
   .el-button--primary {
     background: rgba(13, 134, 127, 0.1);
     color: #0d867f;

src/views/projectInfoManage/index.vue

@@ -114,6 +114,7 @@
           type="index"
           label="序号"
           width="80"
+          :index="indexMethod"
           align="center"
         ></el-table-column>
         <el-table-column
@@ -791,6 +792,9 @@ export default {
     this.getDicts()
   },
   methods: {
+    indexMethod(index) {
+      return (this.pager.current - 1) * this.pager.size + index + 1
+    },
     formatterDept(row, column, cellValue, index, options) {
       const obj = this[options]?.find((v) => v.value == cellValue) || {}
       return obj.label
@@ -1006,7 +1010,7 @@ export default {
             if (item.value == v.busiFileType) {
               item.fileList = [
                 {
-                  name: v.busiFileName,
+                  name: v.fileName,
                   url: v.fileUrl,
                   fileId: v.fileId,
                   fileName: v.fileName,
@@ -1015,7 +1019,7 @@ export default {
               ]
               item.fileArray = [
                 {
-                  name: v.busiFileName,
+                  name: v.fileName,
                   url: v.fileUrl,
                   fileId: v.fileId,
                   fileName: v.fileName,
@@ -1443,13 +1447,13 @@ export default {
 .search_btn {
   width: 100%;
   display: flex;
-  margin-top: 50px;
-  margin-bottom: 20px;
+  margin-top: 14px;
+  margin-bottom: 14px;
 }
 .search_menu {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 50px;
+  margin-bottom: 14px;
 }
 .search_menu_item_container {
   display: flex;

src/views/systemInfoManage/index.vue

@@ -114,6 +114,7 @@
           type="index"
           label="序号"
           width="80"
+          :index="indexMethod"
           align="center"
         ></el-table-column>
         <el-table-column
@@ -390,6 +391,9 @@ export default {
     this.getDicts()
   },
   methods: {
+    indexMethod(index) {
+      return (this.pager.current - 1) * this.pager.size + index + 1
+    },
     openDetail(row) {
       this.rowData = row
       this.appDetailVisible = true
@@ -718,13 +722,13 @@ export default {
 .search_btn {
   width: 100%;
   display: flex;
-  margin-top: 50px;
-  margin-bottom: 20px;
+  margin-top: 14px;
+  margin-bottom: 14px;
 }
 .search_menu {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 50px;
+  margin-bottom: 14px;
 }
 .search_menu_item_container {
   display: flex;

src/views/typical-example-manage/index.vue

@@ -98,6 +98,7 @@
           type="index"
           label="序号"
           width="80"
+          :index="indexMethod"
           align="center"
         ></el-table-column>
         <el-table-column
@@ -347,6 +348,9 @@ export default {
     })
   },
   methods: {
+    indexMethod(index) {
+      return (this.pager.current - 1) * this.pager.size + index + 1
+    },
     search_table() {
       //搜索
       this.pager.current = 1
@@ -708,8 +712,8 @@ export default {
 .search_btn {
   width: 100%;
   display: flex;
-  margin-top: 50px;
-  margin-bottom: 20px;
+  margin-top: 14px;
+  margin-bottom: 14px;
 }
 .el-button--default {
   border: 0;