表格样式跟职站一致

src/styles/common.scss

@@ -25,4 +25,51 @@ input::-moz-input-placeholder {
 }
 input::-ms-input-placeholder {
   color: #333;
+}
+body .cus-table.el-table {
+  border-radius: 4px;
+  th{
+    background-color: #E8F0FF !important;
+    .cell{
+      color: #222326;
+      font-size: 12px;
+      font-weight: normal;
+      .el-checkbox{
+        &:before{
+          opacity: 1;
+        }
+      }
+    }
+  }
+  th, td{
+    padding: 10px 0;
+    border-bottom-color: #E1E6F2;
+  }
+  &.el-table--striped .el-table__body tr.el-table__row--striped td{
+    background-color: #FAFBFF !important;
+  }
+  .el-button--text{
+    padding: 0;
+  }
+}
+
+.pagination {
+  margin: 20px 0;
+  text-align: center;
+  button,.number,.more,.el-input__inner{
+    min-width: 32px !important;
+    height: 32px !important;
+    line-height: 32px;
+    color: #333 !important;
+    background-color: transparent !important;
+    border: 1px solid #ccc !important;
+    border-radius: 2px !important;
+  }
+  button i{
+    color: #333;
+  }
+  .active{
+    color: #fff !important;
+    background-color: #007eff!important;
+  }
 }

src/views/Data.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="wrap">
+    <div class="wrap" v-loading="loading">
       <div class="inner">
       <el-page-header @back="$router.back()" content="我的数据"></el-page-header>
         <div class="tool">
@@ -12,7 +12,7 @@
           </div>
         </div>
 
-        <el-table :data="list" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange">
+        <el-table :data="list" class="cus-table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="80" align="center"></el-table-column>
             <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
             <el-table-column prop="fileName" label="文件名称" align="center" show-overflow-tooltip></el-table-column>
@@ -50,6 +50,7 @@ export default {
     data() {
         return {
           token: util.getCookie('token'),
+          loading: false,
           list: [],
           multipleSelection: [],
           keyword: '',
@@ -66,6 +67,9 @@ export default {
           },500)
         }
     },
+    created() {
+      this.loading = true
+    },
     mounted(){
       this.getData()
     },
@@ -76,7 +80,10 @@ export default {
           const { data } = res
           this.list = data.records
           this.total = data.total
-        }).catch(res => {})
+          this.loading = false
+        }).catch(res => {
+          this.loading = false
+        })
       },
       // 初始化列表
       initData() {
@@ -186,38 +193,9 @@ export default {
   .action {
     display: inline-flex;
   }
-  /deep/.el-table {
-    .el-table__cell {
-      padding: 10px 0;
-    }
-    th.el-table__cell {
-      & > .cell {
-        color: #fff;
-      }
-    }
-  }
   .copy {
     margin-left: 5px;
     cursor: pointer;
   }
-  .pagination {
-    margin: 20px 0;
-    text-align: center;
-    button,.number,.more,.el-input__inner{
-      min-width: 32px !important;
-      height: 32px !important;
-      line-height: 32px;
-      color: #333 !important;
-      background-color: transparent !important;
-      border: 1px solid #ccc !important;
-      border-radius: 2px !important;
-    }
-    button i{
-      color: #333;
-    }
-    .active{
-      color: #fff !important;
-    }
-  }
 }
 </style>

src/views/Preview.vue

@@ -2,7 +2,7 @@
     <div class="wrap">
       <div class="inner">
       <el-page-header @back="$router.back()" content="excel预览" style="margin-bottom: 20px"></el-page-header>
-        <el-table :data="list" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange">
+        <el-table :data="list" class="cus-table" ref="table" stripe header-align="center" v-loading="loading" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="80" align="center"></el-table-column>
             <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
             <el-table-column v-for="(item,index) in list[0]" :prop="index" :key="index" :label="index" align="center"></el-table-column>
@@ -15,7 +15,7 @@ export default {
     data() {
         return {
           path: this.$route.query.path,
-          thead: [],
+          loading: false,
           list: [],
           multipleSelection: []
         };
@@ -26,15 +26,12 @@ export default {
     methods: {
       // 获取列表
       getData() {
+        this.loading = true
         this.$post(`${this.api.lookExcel}?excelUrl=${this.path}`).then(res => {
           const { data } = res
-          const thead = []
           if (data.length) {
-            const item = data[0]
-            for (const i in item) {
-              i && thead.push(i)
-            }
             const result = []
+            // 如果每个字段都是空，则不显示该行
             data.map(e => {
               let valid = false
               for (const i in e) {
@@ -45,11 +42,12 @@ export default {
               }
               valid && result.push(e)
             })
-            this.thead = thead
             this.list = result
+            this.loading = false
           }
-          
         }).catch(res => {
+          this.loading = false
+          // 后端读取失败，就直接打开该excel，并返回我的数据列表
           window.open('https://view.officeapps.live.com/op/view.aspx?src=' + this.path)
           this.$router.back()
         })
@@ -77,38 +75,9 @@ export default {
   .action {
     display: inline-flex;
   }
-  /deep/.el-table {
-    .el-table__cell {
-      padding: 10px 0;
-    }
-    th.el-table__cell {
-      & > .cell {
-        color: #fff;
-      }
-    }
-  }
   .copy {
     margin-left: 5px;
     cursor: pointer;
   }
-  .pagination {
-    margin: 20px 0;
-    text-align: center;
-    button,.number,.more,.el-input__inner{
-      min-width: 32px !important;
-      height: 32px !important;
-      line-height: 32px;
-      color: #333 !important;
-      background-color: transparent !important;
-      border: 1px solid #ccc !important;
-      border-radius: 2px !important;
-    }
-    button i{
-      color: #333;
-    }
-    .active{
-      color: #fff !important;
-    }
-  }
 }
 </style>