添加加载content时显示loading

Author: SmallRuralDog

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=c4920349f29b7efd21e5",
-    "/manifest.js": "/manifest.js?id=d9708e48a6c10ccee4bb",
-    "/vendor.js": "/vendor.js?id=f4679ac178c0e413cb28"
+    "/app.js": "/app.js?id=b0257459c04305121b88",
+    "/manifest.js": "/manifest.js?id=3c768977c2574a34506e",
+    "/vendor.js": "/vendor.js?id=5a30bc9bc2e005aa1c33"
 }

public/mix-manifest.json

@@ -103,7 +103,7 @@
           </div>
         </el-header>
         <el-main :class="{ 'el-main-fixed': fixedHeader }">
-          <div class="layout-content-main">
+          <div class="layout-content-main" >
             <transition name="fade-transform" mode="out-in">
               <router-view></router-view>
             </transition>

resources/js/components/Root.vue

@@ -1,31 +1,7 @@
 <template>
   <div class="grid-container">
     <el-card shadow="never" :body-style="{ padding: 0 }">
-      <div class="filter-form" v-if="attrs.filter.filters.length > 0">
-        <el-form
-          :inline="true"
-          label-suffix=":"
-          :model="filterFormData"
-          v-if="filterFormData"
-        >
-          <el-form-item
-            v-for="(item, index) in attrs.filter.filters"
-            :key="index"
-            :label="item.label"
-          >
-            <ItemDiaplsy
-              v-model="filterFormData[item.column]"
-              :form_item="item"
-              :form_items="attrs.filters"
-              :form_data="filterFormData"
-            />
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="onFilterSubmit">搜索</el-button>
-            <el-button @click="onFilterReset">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
+     
       <div class="grid-top-container">
         <div class="grid-top-container-left">
           <BatchActions
@@ -112,14 +88,40 @@
       :body-style="{ padding: 0 }"
       v-loading="loading"
     >
-      <el-tabs v-if="false">
+     <el-tabs v-if="false">
         <el-tab-pane label="全部" name="first"></el-tab-pane>
         <el-tab-pane label="代付款" name="second"></el-tab-pane>
         <el-tab-pane label="代发货" name="third"></el-tab-pane>
-        <el-tab-pane label="待收货" name="third"></el-tab-pane>
-        <el-tab-pane label="已完成" name="third"></el-tab-pane>
-        <el-tab-pane label="已关闭" name="third"></el-tab-pane>
+        <el-tab-pane label="待收货" name="third2"></el-tab-pane>
+        <el-tab-pane label="已完成" name="third3"></el-tab-pane>
+        <el-tab-pane label="已关闭" name="third4"></el-tab-pane>
       </el-tabs>
+     <div class="filter-form" v-if="attrs.filter.filters.length > 0">
+        <el-form
+          :inline="true"
+          label-suffix="："
+          :model="filterFormData"
+          v-if="filterFormData"
+        >
+          <el-form-item
+            v-for="(item, index) in attrs.filter.filters"
+            :key="index"
+            :label="item.label"
+          >
+            <ItemDiaplsy
+              v-model="filterFormData[item.column]"
+              :form_item="item"
+              :form_items="attrs.filters"
+              :form_data="filterFormData"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onFilterSubmit">搜索</el-button>
+            <el-button @click="onFilterReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+     
       <div>
         <el-table
           :data="tableData"
@@ -181,7 +183,7 @@
           </template>
           <el-table-column
             v-if="attrs.actions && !attrs.actions.hide"
-            label="操作"
+            label=""
           >
             <template slot="header"></template>
             <template slot-scope="scope">
@@ -390,7 +392,14 @@ export default {
     background-color: #ebeef5;
   }
   .filter-form {
-    padding: 10px 10px 0 10px;
+    padding: 10px;
+    border-bottom: 1px solid #ebeef5;
+    .el-form-item{
+      margin-bottom: 0px;
+      .el-form-item__label{
+        padding: 0;
+      }
+    }
   }
 }
 </style>

resources/js/components/grid/Table.vue

@@ -1,11 +1,17 @@
 <template>
-  <component
-    :style="componentData.style"
-    :class="componentData.className"
-    :is="componentData.componentName"
-    :attrs="componentData"
-    v-if="!loading"
-  />
+  <div
+    style="min-height:100px;"
+    v-loading="loading"
+    element-loading-background="rgba(0, 0, 0, 0)"
+  >
+    <component
+      :style="componentData.style"
+      :class="componentData.className"
+      :is="componentData.componentName"
+      :attrs="componentData"
+      v-if="!loading"
+    />
+  </div>
 </template>
 <script>
 export default {
@@ -47,4 +53,4 @@ export default {
     }
   }
 };
-</script>
+</script>

resources/js/components/layout/Base.vue

@@ -123,5 +123,4 @@ protected function buildRelationQuery()
         }]];
     }
 
-
 }

src/Grid/Filter/AbstractFilter.php

@@ -21,6 +21,5 @@ public function __construct($column, $label = '')
     {
         parent::__construct($column, $label);
 
-        $this->{$this->fieldName}();
     }
 }

src/Grid/Filter/Date.php

@@ -321,6 +321,7 @@ public function get()
         $this->setSort();
         $this->setPaginate();
 
+        //dd($this->queries);
 
         $this->queries->unique()->each(function ($query) {
             $this->model = call_user_func_array([$this->model, $query['method']], $query['arguments']);