写了一个组件 加了一些注释
效果图如下

分页一类的功能都已经写好了 下面就上代码，不知道有几个老哥能看的懂，有不足之处，还望老哥们指正

/**
 * 活动菜单 活动列表
 * 注释菜单
 * 最后修改 2020/8/8 10:25
 * HTML组成：上中下结构      上为导航      中为展示列表    下为分页表
 * JS： 
 *   loadActSize 用于载入获取到一共有多少个活动的API接口 方法为Get
 *   loadActByPage 用于载入获取单页的活动
 *   cancelAct 用于撤销删除活动
 *   editAct  用于编辑改变活动（在这里封装后用于将活动的in_banner）属性转变为true 从而添加至轮播图
 *   Pagination 为组件中的分页组件 （element-UI）
 *   data属性：
 *     formInline 用于储存分页的页数内容
 *     addToBannerI 用于储存添加至轮播图的内容
 *     dialogFormVisible 用于控制撤销原因填写框是否出现
 *     form 储存撤销原因和活动ID
 *     listData 用于储存列表中的数据
 *     pageparm 分页参数
 *   method：
 *     created 创建时调用getdata方法获取数据
 *     addToBanner 将活动添加到轮播图
 *     getdata 调用获取到一页的轮播图列表
 *     callFather 更新分页参数
 *     deleteActivity 撤销活动
 *     jump 跳转到新的页面
 * CSS:
 *    user-search 搜索栏的属性 
 */

<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.deptName" placeholder="输入活动名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="序号" width="110">
      </el-table-column>
      <el-table-column sortable prop="image" label="图片" width="100">
        <template slot-scope="scope">
          <el-image :src="scope.row.image"></el-image>
        </template>
      </el-table-column>
      <el-table-column sortable prop="name" label="发起者昵称" width="200">
      </el-table-column>
      <el-table-column sortable prop="originator_id" label="发起者id" width="100">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="jump(scope.row.id)">查看</el-button>
          <el-button size="mini" type="warning" @click="addToBanner(scope.row)">添加至轮播图</el-button>
          <el-button size="mini" type="danger" @click="dialogFormVisible = true">撤销</el-button>
          <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="删除原因" :label-width="formLabelWidth">
                <el-input v-model="form.reason" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteActivity(scope.$index,scope.row)">确 定</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
import {loadActSize,loadActByPage,cancelAct,editAct} from "../../api/basisMG"
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      formInline: {
        page: 1,
        limit: 10,
        size:10,
      },
      addToBannerI:{
        actID:'',
        activity:{
          in_banner:true
        },
        image:{}
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
          actID:1,
          reason: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
      // 删除
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 11
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //添加至轮播图
    addToBanner(act){
      console.log(act)
      this.addToBannerI.actID=act.id
      console.log(this.addToBannerI)
      editAct(this.addToBannerI)
      .then(res=>{
        console.log(res)
      })
    },
    // 获取公司列表
    getdata(parameter) {
      
      this.loading = true
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      loadActSize(parameter).then(res=>{
        console.log(res);
        this.pageparm.total = res.data
        loadActByPage(parameter)
        .then(res => {
          console.log(res);
          this.loading = false
          this.listData = res.data
          // 分页赋值
          this.pageparm.currentPage = this.formInline.page
          this.pageparm.pageSize = this.formInline.limit
        
        })
        .catch(err => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
        })
      })  
      
    },
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //删除活动
    deleteActivity(index,row){
      this.dialogFormVisible = false
      this.$confirm('是否确认删除该活动','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(() =>{
        console.log(index);
        console.log(this.listData)
        this.form.actID = this.listData[index].id
        cancelAct(this.form)
        .then(res=>{
          console.log(res)
        })
        this.$message({
          type:'success',
          message:'删除了该活动'
        });
      }).catch(() =>{
        this.$message({
          type:'info',
          message:'已取消删除该活动'
        })
      })
    },
    jump(activityId){
        this.$router.push({path:"/Activity/activityDetail",query:{activityId:activityId}});
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>