element-ui table 前臺分頁

  <el-table border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%" v-else>
      <el-table-column prop="n" label="序列號" width="80" align="center"></el-table-column>
      <el-table-column prop="ProjectItem" label="購買內容" align="center"></el-table-column>
      <el-table-column prop="TotalAmt" label="金額"  align="center">
         <template slot-scope="scope">
              ￥{{scope.row.TotalAmt}}
         </template>
      </el-table-column>
      <el-table-column prop="IsPaid" label="付款/訂單狀態"  align="center">
        <template slot-scope="scope">
            <p class="table_P" v-if="scope.row.IsPaid==0" style="color:#F56C6C">未付款</p>
            <p class="table_P table_red" v-if="scope.row.IsPaid==1" style="color:#909399">{{scope.row.PaidDate.substring(0,10)}}</p>
            <hr class="table_hr">
            <p class="table_P table_red" v-if="scope.row.IsPost==0" style="color:#E6A23C">待處理</p>
            <p class="table_P table_red" v-if="scope.row.IsPost==1" style="color:#67C23A">處理中</p>
            <p class="table_P table_red" v-if="scope.row.IsPost==2" style="color:#409EFF">已轉包</p>
            <p class="table_P table_red" v-if="scope.row.IsPost==3" style="color:#909399">{{scope.row.PostDate.substring(0,10)}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="CreateDate" label="下單時間"  align="center">
         <template slot-scope="scope">
            {{scope.row.CreateDate.substring(0,10)}}
         </template>
      </el-table-column>
      <el-table-column label="操作"  align="center">
      <template slot-scope="scope">
          <el-button @click="handleClickTable(scope.row)" type="text" size="small" v-if="scope.row.IsPost==3">查看</el-button>
          <el-button @click="handleClickDel(scope.row)" type="text" size="small" v-if="scope.row.IsPost==0 || scope.row.IsPost==3">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

 

 <div class="pages">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="tableData.length"
      ></el-pagination>
    </div>

 

export default {
  name: "DefaultView",
  data() {
    return {
      // 總數據
      tableData: [],
      dialogFormVisiblePayment:false,
      formLabelWidth: "100px",
      // 默認顯示第幾頁
      currentPage: 1, // 當前頁碼
      totalCount: 20, // 總條數
      pageSize: 4, // 每頁的數據條數
    }
   }
}