vue分页效果不展示

Question

问题遇到的现象和发生背景

<div class="app-container">
      <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true"  label-width="68px" style="margin-bottom: -20px;">
        <el-form-item label="机构名称" prop="deptId" >
          <treeselect v-model="queryParams.deptId"
                      :options="deptOptions"
                      :show-count="true"
                      placeholder="请选择归属机构"
                      @onChange="handleNodeClick"/>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName">
          <el-input
            v-model="queryParams.nickName"
            placeholder="请输入用户昵称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="登录账号" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入登录账号"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" icon="el-icon-search" size="mini" @click="handleQuery" round>搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" round>重置</el-button>
        </el-form-item>
      </el-form>
    <div style="height: 10px"></div>
    <el-table v-loading="loading" :data="userList" ref="form"  @selection-change="handleSelectionChange" >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="用户编号" align="center" key="userId" prop="userId"  />
      <el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
      <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
      <el-table-column label="部门" align="center" key="deptName" prop="deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
      <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
      <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            :disabled="accessLevel == 1"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListUser"
    ></pagination>
    <div slot="footer" class="dialog-footer" style="margin-top: 5px">
      <el-button type="primary" @click="submitForm(checkedNm)">确 定</el-button>
      <el-button @click="cancel(checkedNm)">取 消</el-button>
    </div>
  </div>

问题相关代码，请勿粘贴截图

// 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          nickName: undefined,
          deptId: undefined
        },

运行结果及报错内容

我的解答思路和尝试过的方法

不知道哪里出了问题，麻烦大家看看

我想要达到的结果

现在是这样了，但是我点击第二页没有效果

Answer 1

total值呢