1

src/views/adminCenter/dockInfo/index.vue

@@ -10,6 +10,7 @@
             @submitStatus="submitStatus"
             :videoform="videoform"
             :videodata="videodata"
+            :total="videoTotal"
             @addvideoSubmit="addvideoSubmit"
           ></dockInfo>
         </el-col>
@@ -36,6 +37,7 @@ export default {
       form: {},
       videoform: {},
       videodata: [],
+      videoTotal: 0,
     };
   },
   created() {
@@ -48,6 +50,7 @@ export default {
       let res = await this.fetch(this.user.uid);
       if (this.$checkRes(res)) {
         this.$set(this, `videodata`, res.data.videodata);
+        this.$set(this, `videoTotal`, res.data.videodata.length);
         this.$set(this, `form`, res.data);
       }
     },

src/views/adminCenter/dockInfo/parts/dockInfo.vue

@@ -101,10 +101,10 @@
       </el-form>
     </el-dialog>
     <el-dialog title="查看视频信息" :visible.sync="videDialog" width="40%" :before-close="videoclose">
-      <el-table :data="videodata" style="width: 100%" border>
+      <el-table :data="list" style="width: 100%" border class="table">
+        <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
         <el-table-column prop="videointro" label="名称" align="center" show-overflow-tooltip> </el-table-column>
-        <el-table-column prop="videointroinfo" label="简介" align="center" show-overflow-tooltip> </el-table-column>
-        <el-table-column prop="file_path" label="视频路径" align="center" show-overflow-tooltip> </el-table-column>
+        <!-- <el-table-column prop="file_path" label="视频路径" align="center" show-overflow-tooltip> </el-table-column> -->
         <el-table-column label="操作" align="center">
           <template v-slot="scoped">
             <!-- <el-button type="text" @click="editAttend(scoped.$index, scoped.row)" size="small">修改</el-button> -->
@@ -112,6 +112,16 @@
           </template>
         </el-table-column>
       </el-table>
+      <el-col :span="24" class="page">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          layout="total, prev, pager, next, jumper"
+          :total="total"
+          :page-size="pageSize"
+        >
+        </el-pagination>
+      </el-col>
     </el-dialog>
   </div>
 </template>
@@ -126,6 +136,7 @@ export default {
     form: null,
     videoform: { type: Object },
     videodata: { type: Array },
+    total: { type: Number },
   },
   components: {
     upload,
@@ -139,6 +150,11 @@ export default {
       addDialog: false,
       // 查看
       videDialog: false,
+      // 分页
+      currentPage: 1,
+      pageSize: 7,
+      origin: [],
+      list: [],
     };
   },
   created() {
@@ -203,6 +219,13 @@ export default {
       });
       this.videoclose();
     },
+    // 分页
+    search(page = 1) {
+      this.$set(this, `list`, this.origin[page - 1]);
+    },
+    handleCurrentChange(currentPage) {
+      this.search(currentPage);
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -213,7 +236,37 @@ export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
+  watch: {
+    videodata: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
+        this.search();
+      },
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+/deep/.el-dialog__body {
+  height: 350px;
+  overflow: hidden;
+  padding: 20px;
+}
+.table {
+  height: 328px;
+  overflow: hidden;
+}
+/deep/.el-table td {
+  padding: 5px 0;
+}
+/deep/.el-table th {
+  padding: 5px 0;
+}
+.page {
+  text-align: center;
+  padding: 10px 0;
+}
+</style>