element分页

 这是element中的分页，具体的使用方法如下，亲测有效

   <div class="block">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            :total="tableData.length"
            layout="total, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top: 20px; text-align: right;"
          />
        </div>

 

data里面
 

 currentPage: 1,
 pagesize: 10,
 totalPages: 0,

methods:

  handleSizeChange: function (size) {
            this.pagesize = size;
          },
          handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
          },

还有在table里面

    <el-table
          class="params-table"
          style="margin-top: 30px"
          :header-cell-style="{'background': '#109eae42', 'color': '#333'}"
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)">
          <el-table-column type="index"/>
          <!--员工编号-->
          <el-table-column
          prop="staffNumber"
          :label="$t('Workflow.Emplonumber')"
          align="center"/>
         <!--部门-->
          <el-table-column
           prop="work_flow_name"
          :label="$t('Workflow.department')"
          align="center"/>
        <!--角色-->
          <el-table-column
            prop="role"
            :label="$t('Workflow.role')"
            align="center"/>
          <!--零售额度-->
          <el-table-column
            prop="create_time"
            :label="$t('Workflow.Retail')"
            align="center"/>
          <!--工商额度-->
          <el-table-column
            prop="create_time"
            :label="$t('Workflow.Industria')"
            align="center"/>
          <!--更新时间-->
          <el-table-column
            prop="lastupdatedate"
            :label="$t('Workflow.UpdateT')"
            align="center"/>
          <!--配置时间-->
          <el-table-column
            prop="createdate"
            :label="$t('Workflow.Configuration')"
            align="center"/>
          <!--操作-->
          <el-table-column :label="$t('Workflow.operation')" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status == 'COMPLETED'"
                size="mini"
                type="text"
                @click="view(scope.row)">
                {{$t("Workflow.view")}}
              </el-button>
              <el-button
                v-if="scope.row.status == 'ACTIVE'"
                size="mini"
                type="text"
                @click="resume(scope.row)">
                {{$t("Workflow.resume")}}
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="del(scope.row)">
                {{$t("common.delete")}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

不会的直接粘过去用就行