运用 element ui组件 表格 分页器

<template>
  <div>
<div class="top">
     <el-form ref="form" :model="form" label-width="130px" :inline="true" class="form">
       <el-form-item label="费用科目">
            <el-select v-model="form.iExpenseSubject" @change="handleExpenseSubjectChange">
                <el-option label="业招费" value="1"></el-option>
                <el-option label="会议费" value="2"></el-option>
                <el-option label="差旅费 " value="3"></el-option>
                <el-option label="办公费" value="4"></el-option>
                <el-option label="职工教育经费 " value="5"></el-option>
                <el-option label="特殊资金工会经费 " value="5"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="会计账期">
            <el-select v-model="form.dAccountPeriod" @change="handleExpenseSubjectChange">
                <el-option label="YYYY-MM" value="2022-09"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="问题类型">
            <el-select v-model="form.iProblemType" @change="handleExpenseSubjectChange">
                <el-option label="区域一" value="1"></el-option>
                <el-option label="区域二" value="2"></el-option>
            </el-select>
        </el-form-item>
     </el-form>
     <div class="fenye">
        <div></div>
        <div class="btns">
            <el-button
                class="btn"
                v-for="(button, index) in buttons"
                @click="button.handler"
                v-if="button.show"
                :icon="button.icon"
                :key="index"
                :type="button.type"
                >{{ button.name }}
            </el-button>
      </div>
     </div>
     
  </div>
   <div style="margin-top: 50px;" >
            <el-table id ="editAbleTrends"  @selection-change="handleSelectionChange" ref="dataTable"  :data="tableData" :summary-method="getSummaries" show-summary row-key="id" >     
                <el-table-column type="selection" @click="checkMe(scope.row.$index)" align="center" width="40"></el-table-column>
                <el-table-column type="index"  :index="indexMethod" label="序号" align="center" width="60"></el-table-column>
                <el-table-column prop="" label="凭证信息" align="center">
                    <el-table-column prop="checkInfo.vocherInfo.iexpenseSubject" label="费用科目" align="center"></el-table-column>
                    <el-table-column prop="checkInfo.vocherInfo.dAccountPeriod" label="会计账期" align="center"></el-table-column>
                    <el-table-column prop="checkInfo.vocherInfo.scode" label="凭证编号" align="center"></el-table-column>
                    <el-table-column prop="checkInfo.vocherInfo.ssummary" label="凭证摘要" align="center"></el-table-column>
                    <el-table-column prop="checkInfo.vocherInfo.ifeeAmount" label="凭证金额" align="center"></el-table-column>
                    <el-table-column prop="checkInfo.vocherInfo.sflowCode" label="流程编号" align="center"></el-table-column>
                </el-table-column>      
                <el-table-column prop="" label="检查情况" align="center">
                    <el-table-column prop="checkInfo.icheckForm" label="检查形式" align="center"></el-table-column>
                    <el-table-column prop="checkInfo.dcheckTime" label="检查时间" align="center"></el-table-column>
                    <el-table-column prop="checkInfo.scheckWorkName" label="检查工作名称" align="center"> </el-table-column>
                    <el-table-column prop="checkInfo.icheckType" label="检查类型" align="center"></el-table-column>
                    <el-table-column prop="checkInfo.icheckStaffId" label="检查人员" align="center"></el-table-column>
                    <el-table-column prop="iproblemType" label="问题类别" align="center"></el-table-column>
                </el-table-column>
              </el-table>  
              
        </div>
   <div class="fenye">
    <div></div>
     <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page" 
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total,sizes,prev,pager,next,jumper"
                :total="total">
                </el-pagination>
              
         </div>
   
   </div>
      
  </div>
</template>

<script>
import {getProblemledgerAPI} from '@/api/znjd'



export default {
    name:'problemSum',
    
    data() {
       return {
        //表格中选中的数据
        selectData:[],
         tableData: [],
         pageSize:5,
         page:1,
         total:'',
         buttons:[
            {
                name:'查询',
                plain: false,
                type:'primary',
                show:true,
                handler:()=>{
                     this.Problemledger()
                   
                }
            },
            {
                name:'导出',
                plain: false,
                type: 'primary',
                show:true,
                handler:()=>{
                      console.log('ffff') 
                     
                }
            },

         ],
        form:{
           iExpenseSubject:null,
           dAccountPeriod:null,
           iProblemType:null
           
        },
        ProblemledgerList:[],
              }
           },
            created(){
                this.Problemledger()
            },
           methods: {
            
           // 解决点击下一页序号从1开始问题
            indexMethod(index) {
             return index + 1 + (this.page - 1) * this.pageSize  // page是当前的页码，size是页码容量
            },
        //获取序号勾选中的所有数据
             handleSelectionChange(val) {
                // this.selectData = val;
                console.log('ooo',val)
                this.selectData = val;
            },
            
      
           getSummaries(columns){
               console.log(columns);
               },
           //最上面的三个查询下拉事件
           handleExpenseSubjectChange(){
                
               },
            //切换页面
           handleSizeChange(val) {
                this.pageSize = val;
                this.page = 1;
                this.Problemledger()
                console.log('9898',val)
                },
           handleCurrentChange(val) {
                   this.page = val;     
                   this.Problemledger()
                },
            //调接口
           Problemledger(){
                  const params = {
                    key:{
                    page: this.page,
                    pageSize: this.pageSize,
                    },
                    dAccountPeriod:  Number(this.form.dAccountPeriod)||null,
                    iProblemType: this.form.iProblemType||null,
                    iExpenseSubject: Number(this.form.iExpenseSubject)||null,
                    };
                
                 getProblemledgerAPI(params).then(res=>{
                    console.log('666',res)
                    this.tableData = res.data.data;
                    this.total =res.data.total;

                   
                    console.log('qijsi',res.data.pageSize)
                }).catch(err=>{
                    console.log('ssansia',err)
                })
                },
            //导出
           exportWord() {
      const ids = this.ids; // ids：1，2，3
 
      exportFile(ids).then((res) => {
        let content = res.data; // 文件流
        let fileName = 'filename.zip'; // 压缩包文件的文件名，可以根据实际情况修改扩展名
 
        // 创建Blob对象
        let blob = new Blob([content], { type: 'application/zip' });
 
        // 创建下载链接
        let link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        link.style.display = 'none';
 
        // 添加链接到页面上
        document.body.appendChild(link);
 
        // 触发点击事件以开始下载
        link.click();
 
        // 清理链接和URL对象
        URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
 
        // 显示导出成功消息
        this.$message({
          message: "导出成功",
          type: "success",
        });
      })
      .catch((error) => {
        // 处理导出失败的情况
        console.error(error);
        this.$message({
          message: "导出失败",
          type: "error",
        });
      });
                },
           },
           
          } 
</script>
        
       
<style scoped lany="scss">
.top{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
      .btns{
        margin-right: 50px;
      }
        .btn{
                background-color: rgb(24, 144, 255);
                border-radius: 5.5px;
                opacity: 1;
                width: 90px;
                height: 30px;
                color: #fff;
                margin-left: 30px;
            }
    

    .fenye{
      display: flex;
      justify-content: space-between;
      
    }
    

</style>