增加全局方法，处理表格翻页后，index序号延续问题

src/components/TableModel/index.vue

@@ -109,6 +109,9 @@
                 align="center"
                 label="序号"
                 type="index"
+                :index="
+                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
+                "
                 v-if="indexNumShow"
             />
             <el-table-column
@@ -143,6 +146,14 @@
                 </template>
             </el-table-column>
         </el-table>
+
+        <!-- 分页 -->
+        <pagination
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getTableList"
+        />
     </div>
 </template>
 
@@ -170,7 +181,7 @@ export default {
     computed: {
         /* 根据操作栏控制表头是否显示 */
         tableColumCheckProps() {
-            return this.columCheckList.filter((e) => {
+            return this.columCheckList.filter(e => {
                 return e.checked != false
             })
         },
@@ -187,7 +198,18 @@ export default {
     data() {
         return {
             // 列表接口查询参数
-            queryParams: {},
+            queryParams: {
+                pageNum: 1,
+                pageSize: 20,
+            },
+            // 列表数据源
+            tableList: [
+                { scrapNum: '测试' },
+                { scrapNum: '123' },
+                { scrapNum: '测试' },
+            ],
+            // 列表数据条数
+            total: 0,
             // 搜索区域是否隐藏
             showSearch: true,
             // 是否显示复选框
@@ -198,25 +220,18 @@ export default {
             handleShow: true,
             // 列表每列 label
             columCheckList: [],
-            // 列表数据源
-            tableList: [
-                { scrapNum: '测试' },
-                { scrapNum: '123' },
-                { scrapNum: '测试' },
-            ],
             // 操作列最小宽度
             dynamicWidth: 0,
         }
     },
 
     created() {
-        this.columCheckList = this.columnsList
-        this.columCheckList = this.columCheckList.map((e) => {
+        this.columCheckList = this.columnsList.map(e => {
             this.$set(e, 'checked', true)
             return e
         })
         /* 生成查询参数 */
-        this.formLabel.map((e) => {
+        this.formLabel.map(e => {
             this.$set(this.queryParams, e.f_model, '')
         })
         this.getTableList()
@@ -228,7 +243,7 @@ export default {
     methods: {
         /** 获取列表数据 */
         async getTableList() {
-            const res = await this.requestApi({ ...this.queryParams })
+            const res = await this.requestApi(this.queryParams)
             console.log(res, '列表数据')
         },
         /** 查询按钮 */
@@ -238,6 +253,8 @@ export default {
         /** 重置按钮 */
         resetQuery() {
             this.$refs.queryFormRef.resetFields()
+            this.queryParams.pageNum = 1
+            this.queryParams.pageSize = 10
             this.getTableList()
         },
         /** 动态设置操作列的列宽 */
@@ -263,10 +280,6 @@ export default {
                             ? buttonCount
                             : buttons.length
                 })
-                // 如果按钮数量大于2，宽度要加上边距*（按钮数量-1）
-                // if (buttonCount > 2) {
-                //     width += paddingSpacing * (buttonCount - 1)
-                // }
                 return width
             }
         },

src/main.js

@@ -18,7 +18,7 @@ import './assets/icons' // icon
 import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/bonus";
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree, indexContinuation } from "@/utils/bonus";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
@@ -53,6 +53,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
+Vue.prototype.indexContinuation = indexContinuation
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)

src/utils/bonus.js

@@ -88,7 +88,7 @@ export function selectDictLabel(datas, value) {
 
 // 回显数据字典（字符串、数组）
 export function selectDictLabels(datas, value, separator) {
-  if (value === undefined || value.length ===0) {
+  if (value === undefined || value.length === 0) {
     return "";
   }
   if (Array.isArray(value)) {
@@ -233,3 +233,8 @@ export function tansParams(params) {
 export function blobValidate(data) {
   return data.type !== 'application/json'
 }
+
+// 解决表格翻页时 index 索引延续问题
+export function indexContinuation(num, size) {
+  return (num - 1) * size + 1
+}