feature: create POST api done.

src/views/AccountManagement/AccountAdmin/index.vue

@@ -123,7 +123,7 @@ import {
   import iconDetailOn from '@/assets/icon-detail-on.svg';
   import iconDetailOff from '@/assets/icon-detail-card.svg';
 
-
+// 這是製作假資料，在正式環境不會用到
 function repeatAccountList(accountList, N) {
     const repeatedList = [];
 
@@ -143,7 +143,7 @@ function repeatAccountList(accountList, N) {
 const repeatedAccountList = repeatAccountList(accountList, 20);
 
 export default {
-    setup(props) {
+    setup() {
         const acctMgmtStore = useAcctMgmtStore();
         const loadingStore = LoadingStore();
         const modalStore = useModalStore();
@@ -182,6 +182,8 @@ export default {
             internalInfiniteAcctData.value = allUserAccoutList.value.slice(0, ONCE_RENDER_NUM_OF_DATA)
         };
 
+        const isInfiniteFinish = ref(true);
+
         const handleDeleteMouseOver = (username) => {
             acctMgmtStore.changeIsDeleteHoveredByUser(username, true);
         };
@@ -229,12 +231,39 @@ export default {
             moveCurrentLoginUserToFirstRow();
         });
 
+        /**
+         * 無限滾動: 監聽 scroll 有沒有滾到底部
+         * @param {element} event 滾動傳入的事件
+         */
+        const handleScroll = (event) => {
+            if(internalInfiniteAcctData.value.length < ONCE_RENDER_NUM_OF_DATA || isInfiniteFinish.value === false) {
+                return;
+            }
+
+            const container = event.target;
+            const smallValue = 4;
+
+            const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight - smallValue;
+
+            if(overScrollHeight){
+                fetchMoreDataVue3();
+            }
+        };
+        
+        const fetchMoreDataVue3 = () => {
+            infiniteStart.value += ONCE_RENDER_NUM_OF_DATA;
+            internalInfiniteAcctData.value = [internalInfiniteAcctData.value, acctMgmtStore.allUserAccoutList.slice(
+                infiniteStart.value, this.infiniteStart + ONCE_RENDER_NUM_OF_DATA)];
+            isInfiniteFinish.value = true;
+        };
+
         return {
             isLoading,
             modalStore,
             loginUserData,
             internalInfiniteAcctData,
             onCreateNewClick,
+            handleScroll,
             getRowClass,
             onDeleteBtnClick,
             handleDeleteMouseOver,
@@ -276,11 +305,12 @@ export default {
         onAdminRightsBtnClick(isOn){
 
         },
+        
         /**
          * 無限滾動: 監聽 scroll 有沒有滾到底部
          * @param {element} event 滾動傳入的事件
          */
-        handleScroll(event) {
+        handleScrollVue2(event) {
             if(this.infinitMaxItems || this.infiniteAcctData.length < ONCE_RENDER_NUM_OF_DATA || this.isInfiniteFinish === false) {
                 return;
             }
@@ -291,13 +321,13 @@ export default {
             const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight - smallValue;
 
             if(overScrollHeight){
-                this.fetchMoreData();
+                this.fetchMoreDataVue2();
             }
         },
         /**
          * 無限滾動: 滾到底後，要載入數據
          */
-        async fetchMoreData() {
+        async fetchMoreDataVue2() {
             this.isLoading = true;
             this.infiniteFinish = false;
                this.infiniteStart += ONCE_RENDER_NUM_OF_DATA;