fix(table): incorrect row count of data change

vexip-ui · Jul 6, 2021 · 7af4d5a · 7af4d5a
1 parent 1571dc3
commit 7af4d5a
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 132 deletions.
diff --git a/components/table/__serve__/app.vue b/components/table/__serve__/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <Table use-y-bar :columns="columns" :data="data">
+  <Table use-y-bar :columns="columns" :data="pagedData">
     <TableColumn type="expand" id-key="expand">
       <template #default="{ row }">
         <Row style="padding: 20px 40px; background-color: #f8f9fa;">
@@ -44,8 +44,9 @@
       :sorter="ageSorter"
     ></TableColumn>
   </Table>
+  <Pagination v-model:active="currentPage" :page-size="pageSize" :total="data.length"></Pagination>
   <br />
-  <Table :columns="columns2" :data="data.slice(0, 5)">
+  <!-- <Table :columns="columns2" :data="data.slice(0, 5)">
     <TableColumn name="First Name" id-key="firstName" :order="0">
       <template #default="{ row }">
         <Icon name="user" style="margin-right: 8px;"></Icon>
@@ -54,14 +55,15 @@
     </TableColumn>
     <TableColumn name="Job" id-key="job" :order="3"></TableColumn>
     <TableColumn name="Age" id-key="age" :order="2"></TableColumn>
-  </Table>
+  </Table> -->
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref, computed } from 'vue'
 import { Column } from '@/components/column'
 import { Icon } from '@/components/icon'
 import { Row } from '@/components/row'
+import { Pagination } from '@/components/pagination'
 import Table from '../table.vue'
 import TableColumn from '../table-column'
 import { defineFilter, defineColumn } from '../helper'
@@ -74,46 +76,130 @@ export default defineComponent({
     Column,
     Icon,
     Row,
+    Pagination,
     Table,
     TableColumn
   },
-  data() {
-    return {
-      test: false,
-      columns: [
-        defineColumn({
-          name: 'Last Name',
-          key: 'lastName',
-          order: 1,
-          filter: {
-            able: true,
-            options: [
-              { label: 'Starts with D', value: 'D' },
-              { label: 'Starts with F', value: 'F' },
-              { label: 'Starts with R', value: 'R' },
-              { label: 'Starts with T', value: 'T' }
-            ],
-            multiple: true,
-            method(values, row: { lastName: string }) {
-              for (const value of values) {
-                if (row.lastName.startsWith(value)) {
-                  return true
-                }
-              }
+  setup() {
+    const currentPage = ref(1)
+    const pageSize = 3
+
+    const data = ref([
+      {
+        id: '1',
+        job: 'Cashier',
+        email: 'Angelique_Walsh2268@twace.org',
+        firstName: 'Angelique',
+        lastName: 'Walsh',
+        age: '58'
+      },
+      {
+        id: '2',
+        job: 'Stockbroker',
+        email: 'Aeris_Drake5867@gmail.com',
+        firstName: 'Aeris',
+        lastName: 'Drake',
+        age: '40'
+      },
+      {
+        id: '3',
+        job: 'Machine Operator',
+        email: 'Elisabeth_Rogers7566@sheye.org',
+        firstName: 'Elisabeth',
+        lastName: 'Rogers',
+        age: '56'
+      },
+      {
+        id: '4',
+        job: 'Audiologist',
+        email: 'Sharon_Tanner5855@nickia.com',
+        firstName: 'Sharon',
+        lastName: 'Tanner',
+        age: '58'
+      },
+      {
+        id: '5',
+        job: 'Cashier',
+        email: 'Evie_Farmer6650@typill.biz',
+        firstName: 'Evie',
+        lastName: 'Farmer',
+        age: '26'
+      },
+      {
+        id: '6',
+        job: 'Dentist',
+        email: 'Phillip_Rixon8188@gmail.com',
+        firstName: 'Phillip',
+        lastName: 'Rixon',
+        age: '37'
+      },
+      {
+        id: '7',
+        job: 'Web Developer',
+        email: 'Liam_Pickard9810@ovock.tech',
+        firstName: 'Liam',
+        lastName: 'Pickard',
+        age: '32'
+      },
+      {
+        id: '8',
+        job: 'Staffing Consultant',
+        email: 'Ruth_Mcleod599@naiker.biz',
+        firstName: 'Ruth',
+        lastName: 'Mcleod',
+        age: '21'
+      },
+      {
+        id: '9',
+        job: 'Stockbroker',
+        email: 'Marvin_Lakey4748@fuliss.net',
+        firstName: 'Marvin',
+        lastName: 'Lakey',
+        age: '41'
+      },
+      {
+        id: '10',
+        job: 'Lecturer',
+        email: 'Deborah_Santos5515@ubusive.com',
+        firstName: 'Deborah',
+        lastName: 'Santos',
+        age: '29'
+      }
+    ])
+
+    const pagedData = computed(() => {
+      return data.value.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize)
+    })
 
-              return false
+    const columns = ref([
+      defineColumn({
+        name: 'Last Name',
+        key: 'lastName',
+        order: 1,
+        filter: {
+          able: true,
+          options: [
+            { label: 'Starts with D', value: 'D' },
+            { label: 'Starts with F', value: 'F' },
+            { label: 'Starts with R', value: 'R' },
+            { label: 'Starts with T', value: 'T' }
+          ],
+          multiple: true,
+          method(values, row: { lastName: string }) {
+            for (const value of values) {
+              if (row.lastName.startsWith(value)) {
+                return true
+              }
             }
+
+            return false
           }
-        })
-      ],
-      columns2: [
-        defineColumn({
-          name: 'Last Name',
-          key: 'lastName',
-          order: 1
-        })
-      ],
-      firstNameFilter: defineFilter({
+        }
+      })
+    ])
+
+    const firstNameFilter = ref(
+      defineFilter({
         able: true,
         options: [
           { label: 'Starts with A', value: 'A' },
@@ -123,101 +209,38 @@ export default defineComponent({
         method(value, row: { firstName: string }) {
           return row.firstName.startsWith(value)
         }
-      }),
-      ageSorter: {
-        able: true,
-        type: 'asc' as const
-      },
-      data: [
-        {
-          id: '1',
-          job: 'Cashier',
-          email: 'Angelique_Walsh2268@twace.org',
-          firstName: 'Angelique',
-          lastName: 'Walsh',
-          age: '58'
-        },
-        {
-          id: '2',
-          job: 'Stockbroker',
-          email: 'Aeris_Drake5867@gmail.com',
-          firstName: 'Aeris',
-          lastName: 'Drake',
-          age: '40'
-        },
-        {
-          id: '3',
-          job: 'Machine Operator',
-          email: 'Elisabeth_Rogers7566@sheye.org',
-          firstName: 'Elisabeth',
-          lastName: 'Rogers',
-          age: '56'
-        },
-        {
-          id: '4',
-          job: 'Audiologist',
-          email: 'Sharon_Tanner5855@nickia.com',
-          firstName: 'Sharon',
-          lastName: 'Tanner',
-          age: '58'
-        },
-        {
-          id: '5',
-          job: 'Cashier',
-          email: 'Evie_Farmer6650@typill.biz',
-          firstName: 'Evie',
-          lastName: 'Farmer',
-          age: '26'
-        },
-        {
-          id: '6',
-          job: 'Dentist',
-          email: 'Phillip_Rixon8188@gmail.com',
-          firstName: 'Phillip',
-          lastName: 'Rixon',
-          age: '37'
-        },
-        {
-          id: '7',
-          job: 'Web Developer',
-          email: 'Liam_Pickard9810@ovock.tech',
-          firstName: 'Liam',
-          lastName: 'Pickard',
-          age: '32'
-        },
-        {
-          id: '8',
-          job: 'Staffing Consultant',
-          email: 'Ruth_Mcleod599@naiker.biz',
-          firstName: 'Ruth',
-          lastName: 'Mcleod',
-          age: '21'
-        },
-        {
-          id: '9',
-          job: 'Stockbroker',
-          email: 'Marvin_Lakey4748@fuliss.net',
-          firstName: 'Marvin',
-          lastName: 'Lakey',
-          age: '41'
-        },
-        {
-          id: '10',
-          job: 'Lecturer',
-          email: 'Deborah_Santos5515@ubusive.com',
-          firstName: 'Deborah',
-          lastName: 'Santos',
-          age: '29'
-        }
-      ]
-    }
-  },
-  methods: {
-    jobAccessor(row: { job: string }) {
+      })
+    )
+
+    const ageSorter = ref({
+      able: true,
+      type: 'asc' as const
+    })
+
+    const columns2 = ref([
+      defineColumn({
+        name: 'Last Name',
+        key: 'lastName',
+        order: 1
+      })
+    ])
+
+    function jobAccessor(row: { job: string }) {
       return row.job
     }
+
+    return {
+      currentPage,
+      pageSize,
+      data,
+      pagedData,
+      columns,
+      columns2,
+      firstNameFilter,
+      ageSorter,
+
+      jobAccessor
+    }
   }
 })
 </script>
-
-<style lang="scss"></style>
diff --git a/components/table/table.vue b/components/table/table.vue
@@ -368,8 +368,9 @@ export default defineComponent({
     watch(
       () => props.data,
       value => {
+        setPageSize(props.pageSize || value.length)
         setData(value)
-        setPageSize(props.pageSize)
+
         refreshPercentScroll()
       },
       { deep: true }
@@ -664,6 +665,8 @@ export default defineComponent({
       bodyScrollHeight,
       totalRowHeight: toRef(getters, 'totalRowHeight'),
 
+      store,
+
       wrapper,
       thead,
       indicator,