From 029c12365a302bcd798393aeaa76fe3fa9e537fb Mon Sep 17 00:00:00 2001
From: shaohaojiecoder <445923944@qq.com>
Date: Sun, 13 Dec 2020 16:42:17 +0800
Subject: [PATCH] delay render

---
 cmdb-ui/src/components/Table/index.js | 12 ++++++++++++
 cmdb-ui/src/views/cmdb/ci/index.vue   |  7 +++++++
 2 files changed, 19 insertions(+)

diff --git a/cmdb-ui/src/components/Table/index.js b/cmdb-ui/src/components/Table/index.js
index 06f9a2f..4b62563 100644
--- a/cmdb-ui/src/components/Table/index.js
+++ b/cmdb-ui/src/components/Table/index.js
@@ -20,6 +20,10 @@ export default {
       type: [String, Function],
       default: 'key'
     },
+    loaded: {
+      type: Boolean,
+      default: true
+    },
     data: {
       type: Function,
       required: true
@@ -265,6 +269,14 @@ export default {
   },
 
   render () {
+    if (!this.loaded) {
+      return (
+        <div style="width: 100%; height:160px; text-align: center; line-height:160px">
+          <a-spin tip="Loading...">
+          </a-spin>
+        </div>
+      )
+    }
     const props = {}
     const localKeys = Object.keys(this.$data)
     const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert
diff --git a/cmdb-ui/src/views/cmdb/ci/index.vue b/cmdb-ui/src/views/cmdb/ci/index.vue
index 8f45edb..4cd2109 100644
--- a/cmdb-ui/src/views/cmdb/ci/index.vue
+++ b/cmdb-ui/src/views/cmdb/ci/index.vue
@@ -51,6 +51,7 @@
           ref="table"
           size="middle"
           rowKey="ci_id"
+          :loaded="tableLoaded"
           :columns="columns"
           :data="loadInstances"
           :alert="options.alert"
@@ -172,6 +173,7 @@ export default {
   data () {
     return {
       loading: false,
+      tableLoaded: false,
       loadTip: '',
       pageSizeOptions: ['10', '25', '50', '100'],
       form: this.$form.createForm(this),
@@ -191,6 +193,7 @@ export default {
       instanceList: [],
       columns: [],
       loadInstances: parameter => {
+        this.tableLoaded = false
         const params = Object.assign(parameter, this.$refs.search.queryParam)
         let q = `q=_type:${this.$router.currentRoute.meta.typeId}`
         Object.keys(params).forEach(key => {
@@ -219,6 +222,10 @@ export default {
           result.totalPage = Math.ceil(res.numfound / params.pageSize)
           result.data = Object.assign([], res.result)
           result.data.forEach((item, index) => (item.key = item.ci_id))
+          this.$nextTick(() => {
+            this.tableLoaded = true
+          })
+
           if (res.numfound) {
             setTimeout(() => {
               this.setColumnWidth()