el-table分页展示数据

Posted 2020-11-27 yinxin

 

<el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :show-header="true"
        :height="$store.state.clientHeight - 134"
        :header-cell-style="tableHeaderStyle"
        style="width: 100%; overflow-y: auto;">
        <el-table-column type="selection" width="60" align="center"/>
        <el-table-column label="ID" prop="id" align="center" sortable/>
        <el-table-column label="应用系统名称" prop="businessSystemName" align="center" sortable/>
        <el-table-column label="资源申请类型" prop="resourceRequestType" align="center" sortable/>
        <el-table-column label="申请组件" prop="applicationcomponent" sortable/>
        <el-table-column label="订单状态" prop="orderStatus" sortable/>
        <el-table-column label="申请提交日期" prop="date" sortable/>
        <el-table-column label="审批结束日期" prop="enddate" sortable/>
        <el-table-column label="选项" width="120" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" size="small" @click="showDetail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10, 20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length" class="fy">
      </el-pagination>

 

export default {
  data() {
    return {
      // 当前页
      currentPage: 1,
      // 每页多少条
      pageSize: 5,
      date: ‘‘,
      tableData: [],
      search: ‘‘,
      options: [],
      value: ‘‘,
      list: ‘‘,
      componentlist: [],
      statuslist: []
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
}

</script>

 

css

.fy{
  text-align:right;
  margin-top:30px;
}