Browse Source

增加loadding联动

YaolongHan 4 years ago
parent
commit
7131a80f78

+ 2 - 0
src/views/maintain/relationship/relation/components/table.vue

@@ -7,6 +7,7 @@
       color: '#2b2b2b',
       lineHeight: '30px',
     }"
+    v-loading="loading"
     class="table"
     style="width: 100%"
     :height="height ? height : '100%'"
@@ -42,6 +43,7 @@ export default class extends Vue {
   @Prop({ default: Array }) tableHeader?: [];
   @Prop({ default: Array }) tableData?: [];
   @Prop({ default: String || Number }) height?: "";
+  @Prop({ default: Boolean }) loading?: false;
 
   objectSpanMethod() {}
   //  删除

+ 13 - 4
src/views/maintain/relationship/relation/index.vue

@@ -54,6 +54,7 @@
       :tableHeader="tableHeader"
       :tableData="tableData"
       :height="tableHeight"
+      :loading="loading"
     />
     <!-- 分页 -->
     <div class="pagination">
@@ -145,6 +146,7 @@ export default class extends Vue {
     pageSize: 15, //当前页数量
   };
   tableHeight: number = 0; //table高
+  loading: Boolean = false; //是否显示loadding
   /////////////////////////////////////////
   // 方法
 
@@ -260,6 +262,7 @@ export default class extends Vue {
    * 获取table列表
    */
   relManualQuery() {
+    this.loading = true;
     // 获取table数据
     const data = {
       projectId: this.$route.query.projectId,
@@ -274,10 +277,15 @@ export default class extends Vue {
       graphicType: this.$route.query.graphicType,
       zoneType: this.$route.query.zoneType ? this.$route.query.zoneType : "",
     };
-    relManualQuery(data).then((res) => {
-      this.tableData = res.content;
-      this.page.total = res.total;
-    });
+    relManualQuery(data)
+      .then((res) => {
+        this.tableData = res.content;
+        this.page.total = res.total;
+        this.loading = false;
+      })
+      .catch((error) => {
+        this.loading = false;
+      });
   }
 
   created() {
@@ -290,6 +298,7 @@ export default class extends Vue {
     this.relManualQuery();
   }
   mounted() {
+    //计算table的高度
     let allHeight =
       document.getElementsByClassName("relation")[0].offsetHeight - 57; //57是Head的高
     let contentHeight = document.getElementsByClassName("content")[0]