初步完成分页

src/views/holding/holding0.vue

@@ -77,9 +77,12 @@
           <!-- 分页器 -->
           <div class="paging">
             <el-pagination
+            @current-change='currentChange'
+            @size-change='sizeChange'
+            :page-sizes='[8,16,24,32]'
               background
               layout="prev, pager, next,sizes,jumper"
-              :total="100"
+              :total="total"
             >
             </el-pagination>
           </div>
@@ -99,12 +102,14 @@ export default {
   },
   data () {
     return {
+      // 数据总条数
+      total: 0,
       // 获取列表数据字段
       myData: {
         startTime: '', // 开始时间
         endTime: '', // 结束时间
         pageNum: 1, // 起始页码，默认1为第一页
-        pageSize: 10, // 每页数量
+        pageSize: 8, // 每页数量
         searchKey: '', // 搜索条件
         sourceId: null // 臧品来源Id
       },
@@ -125,6 +130,17 @@ export default {
   },
   // 方法集合
   methods: {
+    // 分页器
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      this.myData.pageNum = val
+      this.getList(this.myData)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+      this.myData.pageSize = val
+      this.getList(this.myData)
+    },
     // 点击查看
     mylook (val) {
       this.$router.push({
@@ -195,6 +211,7 @@ export default {
     // 封装获取列表函数
     async getList (data) {
       const res = await getList(data)
+      this.total = res.data.total
       this.tableData = res.data.list
       this.tableData.forEach(v => {
         v.sourceId = this.mySource(v.sourceId)

src/views/holding/holding3.vue

@@ -74,7 +74,7 @@
               </el-table-column>
               <el-table-column prop="name" sortable label="藏品名称">
               </el-table-column>
-              <el-table-column prop="age" sortable label="年代" width="130">
+              <el-table-column prop="age" sortable label="年代" width="180">
               </el-table-column>
               <el-table-column prop="textureType" sortable label="质地" width="220">
               </el-table-column>
@@ -98,9 +98,11 @@
           <!-- 分页器 -->
           <div class="paging">
             <el-pagination
+              @current-change='currentChange'
+              @size-change='sizeChange'
               background
               layout="prev, pager, next,sizes,jumper"
-              :total="100"
+              :total="total"
             >
             </el-pagination>
           </div>
@@ -119,6 +121,8 @@ export default {
   components: { TabList },
   data () {
     return {
+      // 分页器数据总条数
+      total: 0,
       // 服务器前缀地址
       baseURL: '',
       // 请求藏品总账参数
@@ -145,6 +149,17 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 分页器
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      this.mydata.pageNum = val
+      this.getHolding3List(this.mydata)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+      this.mydata.pageSize = val
+      this.getHolding3List(this.mydata)
+    },
     // 点击查看
     myLook (val) {
       this.$router.push({
@@ -155,6 +170,7 @@ export default {
     // 封装获取藏品总账列表
     async getHolding3List (data) {
       const res = await getHolding3List(data)
+      this.total = res.data.total
       // console.log(666, res)
       this.imgList = res.data.list
       this.tableData = res.data.list
@@ -262,12 +278,12 @@ export default {
           overflow: auto;
           padding: 24px;
           .smimg {
-            width: 80px;
-            height: 60px;
+            // width: 80px;
+            // height: 60px;
             img {
               margin: 5px 0 0 5px;
               width: 50px;
-              height: 50px;
+              // height: 50px;
             }
           }
         }
@@ -282,17 +298,19 @@ export default {
           display: flex;
           justify-content: center;
           flex-wrap: wrap;
-          padding: 10px 75px 40px 75px;
+          padding: 10px 60px 40px 60px;
           .imgInfo_single {
+
             cursor: pointer;
             margin: 30px 45px 0 45px;
             text-align: center;
-            width: 140px;
-            height: 165px;
+            width: 215px;
+            height: 250px;
             border: 1px solid #ccc;
             img {
-              width: 140px;
-              height: 120px;
+              // object-fit:scale-down;
+              width: 215px;
+              height: 200px;
               margin-bottom: 8px;
               border: 5px solid #ccc;
             }