el-table分頁展示數據

 

<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;
}