上传记录页表格

src/App.vue

@@ -36,7 +36,7 @@ export default {
     return {
       navTitle1: ' > 数据管理',
       navTitle2: '',
-      isManufacturer: 'distributor', // distributor 经销商 manufacturer 厂商
+      isManufacturer: 'manufacturer', // distributor 经销商 manufacturer 厂商
     }
   },
   methods: {

src/components/Count.vue

@@ -16,4 +16,13 @@ export default {
 </script>
 
 <style scoped lang="less">
+.table_count{
+    height: 20px;
+    margin-top: 10px;
+    p{
+        height: 20px;
+        // display: table-cell;
+        // vertical-align: bottom;
+    }
+}
 </style>

src/tableConfig/carSeries.js

@@ -7,12 +7,9 @@ const TABLEHEADSTYLES = {
 const TRSSTYLE =  {
     width: '50%',
     height: '36px',
-    // padding: '20px'
 };
 const OPERATIONSSTYLE = {
-    padding: '10px',
     color: '#00f'
-
 }
 module.exports = {
     TABLEHEADS,

src/views/data/UploadInfor.vue

@@ -427,7 +427,6 @@ export default {
     margin-top: 10px;
   }
   .count{
-    margin-top: 20px;
     display: flex;
     justify-content: flex-end;
   }
@@ -444,6 +443,9 @@ export default {
     .fileDes{
       width: 100px;
       overflow: hidden;
+      overflow:hidden; /* 超出一行文字自动隐藏 */
+      text-overflow:ellipsis;/* 文字隐藏后添加省略号 */
+      white-space:nowrap; /* 强制不换行 */
     }
     label{
       height: 30px;

src/views/data/UploadRecord.vue

@@ -12,7 +12,7 @@
     <div class="sort">
       <Count :sum='sum'/>
       <p>排序</p>
-      <select v-model="order" @change="sort()">
+      <select v-model="order" @change="sort">
         <option value="">按时间排序</option>
         <option value="ASC">按时间降序</option>
         <option value="DESC">按时间升序</option>
@@ -24,22 +24,32 @@
       >
       </Table>
     </div>
+    <TablePage
+      :currentPage='currentPage'
+      :totalPage='totalPage'
+      @change_page='changePage'
+      @jump_page='jumpPage'
+    ></TablePage>
   </div>
 </template>
 
 <script>
 import Count from '../../components/Count';
 import Table from './components/UploadRecordTable'
+import TablePage from '../../components/TablePage'
 export default {
   components: {
     Count,
-    Table
+    Table,
+    TablePage
   },
   data() {
     return {
       inputValue: '请输入要搜索的资料名',
       order: '', // 排序方式
-      sum: '100', // 表格总数据
+      sum: 100, // 表格总数据
+      currentPage: 1,
+      pageSize: 20,
       data: [
         {name:'雷克萨斯ES上市', time1:'2021/04',range: '共同', download1: 50, download2: 25, time2: '2021/03/10 18:19'},
         {name:'雷克萨斯ES上市', time1:'2021/04',range: '共同', download1: 50, download2: 25, time2: '2021/03/10 18:19'},
@@ -49,6 +59,12 @@ export default {
       ],
     }
   },
+  computed:{
+  // 表格总页数
+  totalPage() {
+    return Math.ceil(this.sum/this.pageSize);
+    }
+  },
   methods: {
     focusInput: function() {
       this.inputValue = '';
@@ -60,7 +76,29 @@ export default {
     sort: function(){
       // ASC降序
       console.log(this.order);
-    }
+    },
+    changePage: function(page) {
+      this.currentPage = page;
+      console.log(page);
+    },
+    // 点击上一页，下一页，首页，尾页
+    jumpPage: function(item) {
+      switch(item) {
+        case 1:
+          this.currentPage = 1;
+          break;
+        case 2:
+          this.currentPage = this.currentPage - 1;
+          break;
+        case 3:
+          this.currentPage = this.currentPage + 1;
+          break;
+        case 4:
+          this.currentPage = this.totalPage;
+          break;
+      }
+      console.log(this.currentPage);
+    },
   },
   mounted() {
   }
@@ -97,8 +135,14 @@ export default {
     display: flex;
     justify-content: flex-end;
     margin-top: 10px;
+    height: 30px;
     p{
-      margin: 0 5px 0 15px;
+      margin: 10px 5px 0 15px;
+      text-align: center;
+      height: 20px;
+    }
+    select{
+      border: 1px solid #ccc;
     }
   }
 }

src/views/data/components/UploadRecordTable.vue

@@ -1,65 +1,95 @@
 <template>
   <div class="table">
     <table>
-        <thead>
-            <tr>
-                <td>资料名称</td>
-                <td >素材时间</td>
-                <td>经销商范围</td>
-                <td>下载量</td>
-                <td>上传时间</td>
-                <td>操作</td>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="(obj, index) in tableData" :key="index" :class="{ table_gray: index%2 === 0 }">
-                <td>{{obj.name}}</td>
-                <td>{{obj.time1}}</td>
-                <td>{{obj.range}}</td>
-                <td><span>{{obj.download1}}</span>/<span>{{obj.download2}}</span></td>
-                <td>{{obj.time2}}</td>
-            </tr>
-        </tbody>
+      <thead>
+        <tr>
+          <td>资料名称</td>
+          <td>素材时间</td>
+          <td>经销商范围</td>
+          <td>下载量</td>
+          <td>上传时间</td>
+          <td>操作</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(obj, index) in tableData"
+          :key="index"
+          :class="{ table_gray: index % 2 === 0 }"
+        >
+          <td style="width: 20%">{{ obj.name }}</td>
+          <td style="width: 10%">{{ obj.time1 }}</td>
+          <td style="width: 10%">{{ obj.range }}</td>
+          <td style="width: 10%">
+            <span>{{ obj.download1 }}</span
+            >/<span style="color: #A30014">{{ obj.download2 }}</span>
+          </td>
+          <td style="width: 15%">{{ obj.time2 }}</td>
+          <td style="width: 25%" class="operation">
+            <span>下载</span>
+            <span>删除</span>
+            <span>查看详情></span>
+          </td>
+        </tr>
+      </tbody>
     </table>
   </div>
 </template>
 
 <script>
 export default {
-    props: {
-        // 表数据
-        tableData: {
-            type: Array,
-            default: () => {
-                return []
-            }
-        }
-    },
-    mounted() {
+  props: {
+    // 表数据
+    tableData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-    data() {
-        return {
-        }
-    }
+  },
+  mounted() {},
+  data() {
+    return {};
+  },
 };
 </script>
 
 <style scoped lang="less">
-.table{
-    background-color: #fff;
-    border-collapse:collapse;
-    border:none;
+.table {
+  background-color: #fff;
+  width: 100%;
+  margin-top: 10px;
+  text-align: center;
+  table {
     width: 100%;
-    td{
+    border-collapse: collapse;
+    border: none;
+    thead{
+      td{
+        background: #8D9092;
+        height: 36px;
+        color: #fff;
         border: 1px solid #ccc;
+      }
     }
-        span{
-            &:hover{
-                cursor: pointer;
+    tbody{
+      td{
+        height: 36px;
+        border: 1px solid #ccc;
+      }
+      .operation{
+          span {
+            color: #00f;
+            margin: 0 20px;
+            &:hover {
+              cursor: pointer;
             }
-        }
+          }
+      }
+    }
+  }
 }
-.table_gray{
-    background: #f5f5f5;
+.table_gray {
+  background: #f5f5f5;
 }
 </style>