一个vue封装按钮 实现弹框分页功能的页面

前言

今天大年初五接财神，希望在新的一年里工作顺利，技术有不断的提升，能够实现今年目标。
这是我实现的第一个需求，希望大家一起共勉。
 1.封装一个按钮。
 2.实现一个弹框，
 3.弹框的分页。

封装一个按钮，附上代码

 <el-button
      type="primary"
      :type="type"
      :size="size"
      @click.stop="handleClick()"
      :icon="iconClass"
      :loading="loading"
      :disabled="disabled"
      >{{ label }}</el-button
    >

一个弹框 及分页，分页使用后端分页， 上代码

<!-- 弹框 -->
    <div @click.stop >
      <el-dialog
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        title="下载记录"
        :visible.sync="dialogTableVisible"
      >
        <div :data="total">下载总次数:{{ total }}</div>
        <el-table
          :data="gridData"
        >
          <el-table-column
            property="userCode"
            label="下载人编码"
            width="150"
          ></el-table-column>
          <el-table-column
            property="userName"
            label="下载人"
            width="200"
          ></el-table-column>
          <el-table-column
            property="createTime"
            label="下载时间"
          ></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div slot="footer">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-dialog>
    </div>

所有功能的js 代码

import axios from "axios";

export default {
  name: "downloadRecode",
  components: {},
 
  data() {
    return {
    
      dialogTableVisible: false,
      currentPage: 1,
      pageSize: 10,
      businessCode: "",
      gridData: [],
      total:0,
    
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage=1;
      this.handleClick()
      
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.handleClick()
      
    },

    handleClick() {
      this.businessCode = this.cParentParams.businessCode;
      console.log(this.businessCode);
       console.log(this.pageSize);
      this.dialogTableVisible = true;
      axios
        .post("/SUNAMC/attachmentsLog/query/pagePDF", {
          businessCode: this.businessCode,
          pageSize:this.pageSize,
          currentPage:this.currentPage

        })
        .then(res => {
         
          this.gridData = res.data.data;
        console.log(this.gridData);
          this.total =parseInt(res.data.pageParam.total);
          
          this.pageSize =parseInt(res.data.pageParam.pageSize) ;
          this.currentPage=parseInt(res.data.pageParam.pageNumber) 
        }); //校验
    }
  }
};