diff --git a/src/components/Form/FormFields/TransferSelect.vue b/src/components/Form/FormFields/TransferSelect.vue
index 2143e9c2b..906bea91b 100644
--- a/src/components/Form/FormFields/TransferSelect.vue
+++ b/src/components/Form/FormFields/TransferSelect.vue
@@ -126,13 +126,17 @@ export default {
         return _.uniq(value)
       },
       set(val) {
-        this.$emit('input', val)
+        this.emit(val)
       }
     }
   },
   methods: {
+    emit(val) {
+      const value = _.uniq(val)
+      this.$emit('input', value)
+    },
     onInputChange(val) {
-      this.$emit('input', val)
+      this.emit(val)
     },
     handleFocus() {
       this.$refs.select2.selectRef.blur()
@@ -155,7 +159,7 @@ export default {
         return { value: item.id, label: item.label }
       })
       this.select2.options = options
-      this.$emit('input', options.map(item => item.value))
+      this.emit(options.map(item => item.value))
       this.showTransfer = false
     }
   }
diff --git a/src/components/Table/TableFormatters/AmountFormatter.vue b/src/components/Table/TableFormatters/AmountFormatter.vue
index 951e6d3e5..b3766f196 100644
--- a/src/components/Table/TableFormatters/AmountFormatter.vue
+++ b/src/components/Table/TableFormatters/AmountFormatter.vue
@@ -3,17 +3,19 @@
     <template>
       <el-popover
         :disabled="!showItems"
+        :open-delay="500"
         :title="title"
         placement="top-start"
         trigger="hover"
         width="400"
+        @show="getAsyncItems"
       >
         <div class="detail-content">
           <div v-for="item of items" :key="getKey(item)" class="detail-item">
             <span class="detail-item-name">{{ item }}</span>
           </div>
         </div>
-        <span slot="reference">{{ items && items.length }}</span>
+        <span slot="reference">{{ amount }}</span>
       </el-popover>
     </template>
   </DetailFormatter>
@@ -37,41 +39,73 @@ export default {
           showItems: true,
           getItem(item) {
             return item.name
-          }
+          },
+          async: false,
+          ajax: {},
+          title: ''
         }
       }
     }
   },
   data() {
+    const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs || {})
     return {
-      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs || {})
+      formatterArgs: formatterArgs,
+      data: formatterArgs.async ? [] : (this.cellValue || []),
+      amount: '',
+      asyncGetDone: false
     }
   },
   computed: {
     title() {
-      return this.formatterArgs.title || ''
+      return this.formatterArgs.title || this.col.label.replace('amount', '').replace('数量', '')
     },
     items() {
+      if (this.formatterArgs.async && !this.asyncGetDone) {
+        return [this.$t('common.tree.Loading') + '...']
+      }
       const getItem = this.formatterArgs.getItem || (item => item.name)
-      let data = this.cellValue?.map(item => getItem(item)) || []
+      let data = this.data.map(item => getItem(item)) || []
       data = data.filter(Boolean)
       return data
     },
     showItems() {
-      return this.formatterArgs.showItems !== false && this.cellValue?.length > 0
+      return this.amount !== 0 && this.amount !== ''
     }
   },
+  async mounted() {
+    this.amount = this.formatterArgs.async ? this.cellValue : (this.cellValue || []).length
+  },
   methods: {
     getKey(item) {
-      const id = Math.random().toString(36).substring(2)
+      const id = Math.random().toString(36).substring(16)
       return id + item
+    },
+    getDefaultUrl() {
+      const url = new URL(this.url, location.origin)
+      url.pathname += this.row.id + '/'
+      return url.pathname
+    },
+    async getAsyncItems() {
+      if (!this.formatterArgs.async) {
+        return
+      }
+      if (this.asyncGetDone) {
+        return
+      }
+      const url = this.formatterArgs.ajax.url || this.getDefaultUrl()
+      const params = this.formatterArgs.ajax.params || {}
+      const transform = this.formatterArgs.ajax.transform || (resp => resp[this.col.prop.replace('_amount', '')])
+      const response = await this.$axios.get(url, { params: params })
+      this.data = transform(response)
+      this.asyncGetDone = true
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 .detail-content {
-  padding: 20px 10px;
+  padding: 5px 10px;
   max-height: 60vh;
   overflow-y: auto;
 }
@@ -86,6 +120,6 @@ export default {
 }
 
 .detail-item:first-child {
-  border-top: 1px solid #EBEEF5;
+  //border-top: 1px solid #EBEEF5;
 }
 </style>
diff --git a/src/views/assets/Domain/DomainList.vue b/src/views/assets/Domain/DomainList.vue
index 046a1d737..5aac70316 100644
--- a/src/views/assets/Domain/DomainList.vue
+++ b/src/views/assets/Domain/DomainList.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter } from '@/components/Table/TableFormatters'
+import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter.vue'
 
 export default {
   components: {
@@ -15,34 +15,32 @@ export default {
       tableConfig: {
         url: '/api/v1/assets/domains/',
         columnsExclude: ['gateway'],
-        columnsExtra: ['gateway_count'],
-        columns: ['name', 'assets_amount', 'gateway_count', 'comment', 'actions'],
+        columnsExtra: ['gateways'],
+        columns: ['name', 'assets_amount', 'gateways', 'comment', 'actions'],
         columnsShow: {
           min: ['name', 'actions'],
-          default: ['name', 'assets_amount', 'gateway_count', 'comment', 'actions']
+          default: ['name', 'assets_amount', 'gateways', 'comment', 'actions']
         },
         columnsMeta: {
           assets_amount: {
             label: this.$t('assets.Assets'),
             width: '160px',
-            formatter: DetailFormatter,
+            formatter: AmountFormatter,
             formatterArgs: {
+              async: true,
               permissions: 'assets.view_asset',
               routeQuery: {
                 activeTab: 'AssetList'
               }
             }
           },
-          gateway_count: {
+          gateways: {
             label: this.$t('assets.Gateway'),
-            formatter: DetailFormatter,
+            formatter: AmountFormatter,
             formatterArgs: {
               permissions: 'assets.view_gateway',
               routeQuery: {
                 activeTab: 'GatewayList'
-              },
-              getTitle: function({ row }) {
-                return row.gateways.length
               }
             }
           }
diff --git a/src/views/perms/AssetPermission/AssetPermissionList.vue b/src/views/perms/AssetPermission/AssetPermissionList.vue
index 69b979bc0..f541ea6f1 100644
--- a/src/views/perms/AssetPermission/AssetPermissionList.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionList.vue
@@ -21,7 +21,6 @@ import PermBulkUpdateDialog from './components/PermBulkUpdateDialog'
 import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter'
 import { mapGetters } from 'vuex'
 import { AccountLabelMapper, AssetPermissionListPageSearchConfigOptions } from '../const'
-import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
@@ -90,8 +89,9 @@ export default {
           users_amount: {
             label: this.$t('perms.User'),
             width: '60px',
-            formatter: DetailFormatter,
+            formatter: AmountFormatter,
             formatterArgs: {
+              async: true,
               routeQuery: {
                 activeTab: 'AssetPermissionUser'
               }
@@ -100,8 +100,9 @@ export default {
           user_groups_amount: {
             label: this.$t('perms.UserGroups'),
             width: '100px',
-            formatter: DetailFormatter,
+            formatter: AmountFormatter,
             formatterArgs: {
+              async: true,
               routeQuery: {
                 activeTab: 'AssetPermissionUser'
               }
@@ -110,8 +111,9 @@ export default {
           assets_amount: {
             label: this.$t('perms.Asset'),
             width: '60px',
-            formatter: DetailFormatter,
+            formatter: AmountFormatter,
             formatterArgs: {
+              async: true,
               routeQuery: {
                 activeTab: 'AssetPermissionAsset'
               }
@@ -120,8 +122,9 @@ export default {
           nodes_amount: {
             label: this.$t('perms.Node'),
             width: '60px',
-            formatter: DetailFormatter,
+            formatter: AmountFormatter,
             formatterArgs: {
+              async: true,
               routeQuery: {
                 activeTab: 'AssetPermissionAsset'
               }
diff --git a/src/views/users/Group/UserGroupList.vue b/src/views/users/Group/UserGroupList.vue
index dcb7ceb3b..512f54e68 100644
--- a/src/views/users/Group/UserGroupList.vue
+++ b/src/views/users/Group/UserGroupList.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter } from '@/components/Table/TableFormatters'
+import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter.vue'
 
 export default {
   components: {
@@ -23,8 +23,9 @@ export default {
           users_amount: {
             label: this.$t('users.Users'),
             width: '120px',
-            formatter: DetailFormatter,
+            formatter: AmountFormatter,
             formatterArgs: {
+              async: true,
               getRoute({ row }) {
                 return {
                   name: 'UserGroupDetail',