fix: the check problem of standard table with pagination; 🐛

修复：标准表格分页勾选问题；

src/components/table/StandardTable.vue

@@ -23,7 +23,7 @@
       :expandedRowKeys="expandedRowKeys"
       :expandedRowRender="expandedRowRender"
       @change="onChange"
-      :rowSelection="selectedRows ? {selectedRowKeys: selectedRowKeys, onChange: updateSelect} : undefined"
+      :rowSelection="selectedRows ? {selectedRowKeys, onSelect, onSelectAll} : undefined"
     >
       <template slot-scope="text, record, index" :slot="slot" v-for="slot in Object.keys($scopedSlots).filter(key => key !== 'expandedRowRender') ">
         <slot :name="slot" v-bind="{text, record, index}"></slot>
@@ -64,22 +64,70 @@ export default {
     }
   },
   methods: {
-    updateSelect (selectedRowKeys, selectedRows) {
+    equals(record1, record2) {
-      this.$emit('update:selectedRows', selectedRows)
+      if (record1 === record2) {
-      this.$emit('selectedRowChange', selectedRowKeys, selectedRows)
+        return true
+      }
+      const {rowKey} = this
+      if (rowKey && typeof rowKey === 'string') {
+        return record1[rowKey] === record2[rowKey]
+      } else if (rowKey && typeof rowKey === 'function') {
+        return rowKey(record1) === rowKey(record2)
+      }
+      return false
+    },
+    contains(arr, item) {
+      if (!arr || arr.length === 0) {
+        return false
+      }
+      const {equals} = this
+      for (let i = 0; i < arr.length; i++) {
+        if (equals(arr[i], item)) {
+          return true
+        }
+      }
+      return false
+    },
+    onSelectAll(selected, rows) {
+      const {getKey, contains} = this
+      const unselected = this.dataSource.filter(item => !contains(rows, item, this.rowKey))
+      const _selectedRows = this.selectedRows.filter(item => !contains(unselected, item, this.rowKey))
+      const set = {}
+      _selectedRows.forEach(item => set[getKey(item)] = item)
+      rows.forEach(item => set[getKey(item)] = item)
+      const _rows = Object.values(set)
+      this.$emit('update:selectedRows', _rows)
+      this.$emit('selectedRowChange', _rows.map(item => getKey(item)), _rows)
+    },
+    getKey(record) {
+      const {rowKey} = this
+      if (!rowKey || !record) {
+        return undefined
+      }
+      if (typeof rowKey === 'string') {
+        return record[rowKey]
+      } else {
+        return rowKey(record)
+      }
+    },
+    onSelect(record, selected) {
+      const {equals, selectedRows, getKey} = this
+      const _selectedRows = selected ? [...selectedRows, record] : selectedRows.filter(row => !equals(row, record))
+      this.$emit('update:selectedRows', _selectedRows)
+      this.$emit('selectedRowChange', _selectedRows.map(item => getKey(item)), _selectedRows)
     },
     initTotalList (columns) {
-      const totalList = columns.filter(item => item.needTotal)
+      return columns.filter(item => item.needTotal)
         .map(item => {
           return {
             ...item,
             total: 0
           }
         })
-      return totalList
     },
     onClear() {
-      this.updateSelect([], [])
+      this.$emit('update:selectedRows', [])
+      this.$emit('selectedRowChange', [], [])
       this.$emit('clear')
     },
     onChange(pagination, filters, sorter, {currentDataSource}) {
@@ -110,10 +158,8 @@ export default {
   },
   computed: {
     selectedRowKeys() {
-      return this.selectedRows.map(record => {
+      return this.selectedRows.map(record => this.getKey(record))
-        return (typeof this.rowKey === 'function') ? this.rowKey(record) : record[this.rowKey]
+    },
-      })
-    }
   }
 }
 </script>

src/mock/index.js

@@ -5,6 +5,7 @@ import '@/mock/user/login'
 import '@/mock/workplace'
 import '@/mock/user/routes'
 import '@/mock/goods'
+import '@/mock/list'
 
 // 设置全局延时
 Mock.setup({

src/mock/list/index.js

@@ -0,0 +1,52 @@
+import Mock from 'mockjs'
+import '@/mock/extend'
+import {parseUrlParams} from '@/utils/request'
+
+const current = new Date().getTime()
+
+const source = Mock.mock({
+  'list|100': [{
+    'key|+1': 0,
+    'no': `${current}-@integer(1,100)`,
+    'description': '这是一段描述',
+    'callNo|0-50': 5,
+    'status|1-4': 1,
+    'updatedAt': '@DATETIME',
+  }]
+})
+
+Mock.mock(RegExp(`${process.env.VUE_APP_API_BASE_URL}/list` + '.*'),'get', ({url}) => {
+  const params = parseUrlParams(decodeURI(url))
+  let {page, pageSize} = params
+  page = eval(page) - 1 || 0
+  pageSize = eval(pageSize) || 10
+
+  delete params.page
+  delete params.pageSize
+
+  let result = source.list.filter(item => {
+    for (let [key, value] of Object.entries(params)) {
+      if (item[key] !== value) {
+        return false
+      }
+    }
+    return true
+  })
+  const total = result.length
+  if ((page) * pageSize > total) {
+    result = []
+  } else {
+    result = result.slice(page * pageSize, (page + 1) * pageSize)
+  }
+
+  return {
+    code: 0,
+    message: 'success',
+    data: {
+      page: page + 1,
+      pageSize,
+      total: 100,
+      list: result
+    }
+  }
+})

src/pages/list/QueryList.vue

@@ -98,6 +98,7 @@
         :selectedRows.sync="selectedRows"
         @clear="onClear"
         @change="onChange"
+        :pagination="{...pagination, onChange: onPageChange}"
         @selectedRowChange="onSelectChange"
       >
         <div slot="description" slot-scope="{text}">
@@ -127,6 +128,7 @@
 
 <script>
 import StandardTable from '@/components/table/StandardTable'
+import {request} from '@/utils/request'
 const columns = [
   {
     title: '规则编号',
@@ -160,19 +162,6 @@ const columns = [
   }
 ]
 
-const dataSource = []
-
-for (let i = 0; i < 100; i++) {
-  dataSource.push({
-    key: i,
-    no: 'NO ' + i,
-    description: '这是一段描述',
-    callNo: Math.floor(Math.random() * 1000),
-    status: Math.floor(Math.random() * 10) % 4,
-    updatedAt: '2018-07-26'
-  })
-}
-
 export default {
   name: 'QueryList',
   components: {StandardTable},
@@ -180,14 +169,37 @@ export default {
     return {
       advanced: true,
       columns: columns,
-      dataSource: dataSource,
+      dataSource: [],
-      selectedRows: []
+      selectedRows: [],
+      pagination: {
+        current: 1,
+        pageSize: 10,
+        total: 0
+      }
     }
   },
   authorize: {
     deleteRecord: 'delete'
   },
+  mounted() {
+    this.getData()
+  },
   methods: {
+    onPageChange(page, pageSize) {
+      this.pagination.current = page
+      this.pagination.pageSize = pageSize
+      this.getData()
+    },
+    getData() {
+      request(process.env.VUE_APP_API_BASE_URL + '/list', 'get', {page: this.pagination.current,
+        pageSize: this.pagination.pageSize}).then(res => {
+        const {list, page, pageSize, total} = res?.data?.data ?? {}
+        this.dataSource = list
+        this.pagination.current = page
+        this.pagination.pageSize = pageSize
+        this.pagination.total = total
+      })
+    },
     deleteRecord(key) {
       this.dataSource = this.dataSource.filter(item => item.key !== key)
       this.selectedRows = this.selectedRows.filter(item => item.key !== key)