查询为空显示

src/views/education/item-component.vue

@@ -34,7 +34,9 @@
             <el-row :gutter="10" class="row create-button" style="margin-right:0;">
                 <el-button type="primary" size="small" @click="createComponent">新建项目组件</el-button>
             </el-row>
-            <el-table :data="tableData" style="width: 100%">
+            <el-table 
+            :data="tableData" 
+            style="width: 100%">
                 <el-table-column prop="id" label="ID编号" min-width="100" align="center"></el-table-column>
                 <el-table-column prop="name" label="组件名称" min-width="200" align="center"></el-table-column>
                 <el-table-column prop="createdName" label="发起人" min-width="100" align="center"></el-table-column>
@@ -51,6 +53,12 @@
                         <el-button type="primary" v-if="scope.row.status == 1 || scope.row.status == 2" size="small" @click="deleteComponent(scope.row)">删除</el-button>
                     </template>
                 </el-table-column>
+                <div slot="empty">
+                    <div class="table-empty">
+                        <img src="../../assets/image/no-content1.png" />
+                        <p>没有查询到相关结果</p>
+                    </div>
+                </div>
             </el-table>
             <!-- 分页 -->
             <div class="pagination">
@@ -267,6 +275,14 @@ export default {
             margin-top: 0 !important;
             text-align: right;
         }
+        .table-empty {
+            img{
+                width: 100px;
+            }
+            p {
+                margin-top: -50px;
+            }
+        }
     }
 }
 </style>