完善ui,添加无数据时样式

src/views/demoData/demoData1.vue

@@ -5,21 +5,24 @@
     <!-- 这里是选择栏 -->
     <div class="select">
       <!-- aaa -->
-      <el-select v-model="myaaa" multiple clearable style="margin-left: 20px; width: 300px;" placeholder="请选择aaa">
+      <span style="margin-left: 20px;">aaa</span>
+      <el-select v-model="myaaa" multiple clearable style="margin-left: 10px; width: 300px;" placeholder="请选择aaa">
         <el-option v-for="item in aaa" :key="item.month" :label="item.month" :value="item.month">
         </el-option>
       </el-select>
 
 
       <!-- cccc -->
-      <el-select v-model="mycccc" multiple clearable style="margin-left: 20px; width: 300px;" placeholder="请选择cccc">
+      <span style="margin-left: 10px;">cccc</span>
+      <el-select v-model="mycccc" multiple clearable style="margin-left: 10px; width: 300px;" placeholder="请选择cccc">
         <el-option v-for="item in cccc" :key="item.cccc" :label="item.cccc" :value="item.cccc">
         </el-option>
       </el-select>
 
 
       <!-- eee -->
-      <el-select v-model="myeee" multiple clearable style="margin-left: 20px; width: 300px;" placeholder="请选择eee">
+      <span style="margin-left: 10px;">eee</span>
+      <el-select v-model="myeee" multiple clearable style="margin-left: 10px; width: 300px;" placeholder="请选择eee">
         <el-option v-for="item in eee" :key="item.eee" :label="item.eee" :value="item.eee">
         </el-option>
       </el-select>
@@ -32,7 +35,7 @@
     <div v-show="advancedSearch" style="margin-left: 20px;">
       <!-- bbb是2w,这里换成搜索 -->
       <div style="margin-top: 10px;">
-
+        <span>bbb</span>
         <el-autocomplete class="inline-input" v-model="inputbbb" :fetch-suggestions="querySearchBbb" placeholder="搜索bbb"
           :trigger-on-focus="false" @select="handleSelectBbb">
 
@@ -48,6 +51,7 @@
       </div>
       <!-- ddd是300,这里换成搜索 -->
       <div style="margin-top: 10px;">
+        <span>ddd</span>
         <el-autocomplete class="inline-input" v-model="inputddd" :fetch-suggestions="querySearchDdd" placeholder="搜索ddd"
           :trigger-on-focus="false" @select="handleSelectDdd">
 
@@ -61,6 +65,7 @@
       </div>
       <!-- dddd是3k,这里换成搜索 -->
       <div style="margin-top: 10px;">
+        <span>dddd</span>
         <el-autocomplete class="inline-input" v-model="inputdddd" :fetch-suggestions="querySearchDddd"
           placeholder="搜索dddd" :trigger-on-focus="false" @select="handleSelectDddd">
 
@@ -78,7 +83,8 @@
     <div class="checkBox">
       <el-checkbox-group v-model="myCheckBox" :min="0" :max="3">
         <el-checkbox v-for="check in checkBox" :label="check" :key="check">{{ check }}</el-checkbox>
-        <el-button type="primary" icon="el-icon-search" @click="searchToGetInfo" style="margin-left: 20px;">查询</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="searchToGetInfo"
+          style="margin-left: 20px;">查询</el-button>
         <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
         <el-button type="success" icon="el-icon-download" style="float: right; margin-right: 40px;">导出</el-button>
       </el-checkbox-group>
@@ -99,6 +105,9 @@
             :label="item2.label" align="center">
           </el-table-column>
         </el-table-column>
+        <template slot="empty">
+          <img src='./404.png' alt='暂无数据，稍后重试' />
+        </template>
       </el-table>
     </div>
 
@@ -112,7 +121,10 @@
     <!-- <button @click="test">2222</button> -->
 
     <!-- 点击表单内容出现的表格 -->
-    <el-dialog :visible.sync="dialogTableVisible">
+    <el-dialog :visible.sync="dialogTableVisible" title="详细信息">
+      <el-button type="success" icon="el-icon-download" style="float: right">导出</el-button>
+
+      <div style="margin-top: 35px;">
         <el-table :data="gridData" :cell-style="setCellColor">
           <el-table-column fixed property="ccc" label="ccc" width="100"></el-table-column>
           <el-table-column property="aaa" label="aaa" width="100"></el-table-column>
@@ -131,12 +143,17 @@
 
           <el-table-column property="lll" label="lll" width="100"></el-table-column>
           <el-table-column property="mmm" label="mmm" width="100"></el-table-column>
+          <template slot="empty">
+            <img src='./404.png' alt='暂无数据，稍后重试' />
+          </template>
         </el-table>
 
         <el-pagination @size-change="handleSizeChangeInDialog" @current-change="handleCurrentChangeInDialog"
-        :current-page="currentPageInDialog" :page-sizes="[10, 20]" :page-size="pageSizeInDialog"
+          :current-page="currentPageInDialog" :page-sizes="[20, 30]" :page-size="pageSizeInDialog"
           layout="total, sizes, prev, pager, next, jumper" :total="totalPageInDialog">
         </el-pagination>
+      </div>
+
 
     </el-dialog>
 
@@ -179,6 +196,21 @@ export default {
       jjj: false,
       kkk: false,
 
+
+      lockaaa: [],
+      lockbbb: [],
+      lockcccc: [],
+      lockddd: [],
+      lockdddd: [],
+      lockeee: [],
+      lockfff: false,
+      lockggg: false,
+      lockhhh: false,
+      lockiii: false,
+      lockjjj: false,
+      lockkkk: false,
+
+
       mytableList: [],
       dateColData: [],
 
@@ -187,7 +219,7 @@ export default {
       currentPage: 1,
 
       totalPageInDialog: 100,
-      pageSizeInDialog: 10,
+      pageSizeInDialog: 20,
       currentPageInDialog: 1,
 
       loading: true,
@@ -285,6 +317,20 @@ export default {
       } else {
         this.kkk = true
       }
+
+      this.lockaaa = this.myaaa
+      this.lockbbb = this.mybbb
+      this.lockcccc = this.mycccc
+      this.lockddd = this.myddd
+      this.lockdddd = this.mydddd
+      this.lockeee = this.myeee
+      this.lockfff = this.myfff
+      this.lockggg = this.myggg
+      this.lockhhh = this.myhhh
+      this.lockiii = this.myiii
+      this.lockjjj = this.myjjj
+      this.lockkkk = this.mykkk
+
       const data = {
         aaa: this.myaaa,
         bbb: this.mybbb,
@@ -318,7 +364,6 @@ export default {
           this.getDateType3()
         }
         this.loading = false
-
       });
     },
 
@@ -481,7 +526,7 @@ export default {
           children: [
             {
               prop: Object.keys(item)[1] + index,
-              label: Object.keys(item)[1] + "的值"
+              label: Object.keys(item)[1]
             }
           ]
         })
@@ -528,11 +573,11 @@ export default {
           children: [
             {
               prop: Object.keys(item)[1] + index,
-              label: Object.keys(item)[1] + "的值"
+              label: Object.keys(item)[1]
             },
             {
               prop: Object.keys(item)[2] + index,
-              label: Object.keys(item)[2] + "的值"
+              label: Object.keys(item)[2]
             }
           ]
         })
@@ -582,15 +627,15 @@ export default {
           children: [
             {
               prop: Object.keys(item)[1] + index,
-              label: Object.keys(item)[1] + "的值"
+              label: Object.keys(item)[1]
             },
             {
               prop: Object.keys(item)[2] + index,
-              label: Object.keys(item)[2] + "的值"
+              label: Object.keys(item)[2]
             },
             {
               prop: Object.keys(item)[3] + index,
-              label: Object.keys(item)[3] + "的值"
+              label: Object.keys(item)[3]
             }
           ]
         })
@@ -635,18 +680,18 @@ export default {
 
 
       this.dialogTempData = {
-        aaa: this.myaaa,
-        bbb: this.mybbb,
-        cccc: this.mycccc,
-        ddd: this.myddd,
-        dddd: this.mydddd,
-        eee: this.myeee,
-        fff: this.fff,
-        ggg: this.ggg,
-        hhh: this.hhh,
-        iii: this.iii,
-        jjj: this.jjj,
-        kkk: this.kkk,
+        aaa: this.lockaaa,
+        bbb: this.lockbbb,
+        cccc: this.lockcccc,
+        ddd: this.lockddd,
+        dddd: this.lockdddd,
+        eee: this.lockeee,
+        fff: this.lockfff,
+        ggg: this.lockggg,
+        hhh: this.lockhhh,
+        iii: this.lockiii,
+        jjj: this.lockjjj,
+        kkk: this.lockkkk,
 
         pageSize: this.pageSizeInDialog,
         pageNo: this.currentPageInDialog,
@@ -687,10 +732,10 @@ export default {
 </script>
 
 <style scoped>
-
+/* 
 ::v-deep .el-table__body tr:hover>td {
   background-color: pink !important;
-}
+} */
 
 .checkBox {
   margin-top: 20px;