第三次上传

src/components/TableFooter.vue

@@ -51,10 +51,4 @@ export default {
 </script>
 
 <style scoped>
-  /deep/ .el-pagination__jump {
-    color: white;
-  }
-  /deep/ .el-pagination__total {
-    color: white;
-  }
 </style>

src/views/pastureData/Home.vue

@@ -37,12 +37,74 @@
       </el-form>
     </div>
     <div class="box_table">
-      <el-table></el-table>
+      <el-table
+          :data="tableData"
+          border
+          stripe
+          :header-cell-style="{'text-align':'center', 'background-color': '#F9FAFC', 'padding': '5px 0'}"
+          :cell-style="{'text-align':'center', 'padding': '5px 0'}"
+          height="700"
+          style="width: 100%;">
+        <el-table-column
+            prop="date"
+            label="时间">
+        </el-table-column>
+        <el-table-column
+            prop="date"
+            label="母猪存栏">
+        </el-table-column>
+        <el-table-column
+            prop="date"
+            label="耳标离线">
+        </el-table-column>
+        <el-table-column
+            prop="date"
+            label="日龄占比 (250-1700)"
+            :render-header="renderHeader">
+        </el-table-column>
+        <el-table-column
+            prop="date"
+            label="日龄占比 (1000-1700)"
+            :render-header="renderHeader">
+        </el-table-column>
+        <el-table-column
+            prop="date"
+            label="日龄占比 (1700-2400)"
+            :render-header="renderHeader">
+        </el-table-column>
+        <el-table-column
+            prop="date"
+            label="日龄占比 (>2400)"
+            :render-header="renderHeader">
+        </el-table-column>
+        <el-table-column
+            prop="date"
+            label="配怀存栏">
+        </el-table-column>
+        <el-table-column
+            prop="date"
+            label="分娩存栏">
+        </el-table-column>
+        <el-table-column
+            prop="date"
+            label="后备存栏">
+        </el-table-column>
+        <el-table-column
+            prop="date"
+            label="公猪存栏">
+        </el-table-column>
+      </el-table>
+      <table-footer
+          :totals="totalPages"
+          :size="pageSize"
+          @sizeChange="sizeChange"
+          @pageChange="pageChange"></table-footer>
     </div>
   </div>
 </template>
 
 <script>
+import TableFooter from "../../components/TableFooter";
 export default {
   name: "Home",
   data() {
@@ -106,7 +168,39 @@ export default {
           }
         }]
       },
-      value2: ''
+      value2: '',
+      tableData: [],
+      totalPages: 0,
+      pageNum: 1,
+      pageSize: 20,
+    }
+  },
+  components: {
+    TableFooter
+  },
+  methods: {
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum = val;
+    },
+    renderHeader(createElement, { column }) {
+      const label = column.label
+      const labelArr = label.split(' ')
+      return createElement(
+          'span',     //创建最外层的标签可随意
+          [
+            createElement('span', {  // 创建第一个元素的标签可随意
+              attrs: { type: 'text' }
+            },[labelArr[0]] ),
+            createElement('div', {  // 创建第二个元素的标签可随意
+              attrs: { type: 'text', style: 'font-size:14px' } // 给分割的某个元素单独加样式
+            }, [labelArr[1] || ''] )
+          ]
+      )
     }
   }
 }