vuejs el-pagination 分页数据渲染

<!-- 分页 -->
<div class="pagination" v-if="totality*pageSizeCount > 1" :class="{'dn':this.totality <= 1}">
    <el-pagination background @current-change="handleCurrentChange" :current-page="pageNum" :total="totality" layout="total, prev, pager, next, jumper" hide-on-single-page>
    </el-pagination>
</div>

data() {
    return {
        // 分页
        pageNum:1,
        pageSizeCount:'',
        totality:0,
    }
},

methods: {
    // 查询数据 --- 分页+条件查询所有活动场景
    sceneLabelGetAll(){
        let that = this;
        that.emptyText = "数据加载中...";
        post("API接口",{
          ...parameterData,
          currentPageNo:that.pageNum,
          pageSize:10,
        }).then((res)=>{
          if(res.code === 1){
            if(res.data.records != null && res.data.records.length != 0){
              let str = [];
              for(let val of res.data.records){
                str.push({
                  operationalBehavior: val.operationalBehavior,
                  operationDetails: val.operationDetails,
                  operationTime: val.operationTime,
                  operatorName: val.operatorName,
                  ipAddress: val.ipAddress,
                })
              }
              // 表格数据渲染
              that.tableData = str;
              // 当前页码
              that.pageNum = res.data.currentPageNo;
              // 每页显示条目个数
              that.pageSizeCount = res.data.totalPageSize;
              // 总数目
              that.totality = res.data.totalCount;
            }else{
              // 表格数据渲染
              that.tableData = [];
              that.emptyText = "暂无数据";
            }
          }else{
            that.emptyText = "暂无数据";
          }
          that.loadData = "2";
        })
    },
    //currentPage 改变时
    handleCurrentChange(val) {
        // 改变页面再调用查询接口
        this.pageNum = val;
        this.sceneLabelGetAll();
        this.$emit("handleCurrentChange",val)
    },
},

// 分页
 .pagination{
    text-align:right;
    padding:20px 0
 }

最终效果