【Vue-Element-Template】在列表頁初始化時自動加載數據並增加分頁功能（四）

1、頁面初始化自動調用數據請求方法

使用到了vue的生命周期，這里直接上代碼，如下圖：

mounted: function() {
    // 在頁面加載時請求數據
    this.binddatas()
  },
  methods: {
    // 查詢方法
    onSubmit() {
      console.log('測試提示1')
    },
   binddatas(){
　　console.log('請求api的數據')
　}

這樣就可以在頁面加載時自動請求數據，不用每次都點擊加載按鈕來調用數據請求

 

2、增加分頁

參考element-ui網站，將分頁的代碼加進來，具體參考    直接將分頁代碼放在展示數據的div之后即可 

<div>
      <el-container>
        <el-header style="text-align: right; font-size: 12px" />
        <el-main>
          <el-table :data="tableData">
            <el-table-column
              hidden
              prop="merchant_id"
              label="商戶ID"
              width="120"
            />
            <el-table-column
              prop="merchant_ssn"
              label="訂單號"
              width="140"
            />
            <el-table-column
              prop="merchant_name"
              label="商戶名稱"
            />
            <el-table-column
              prop="amount"
              label="充值金額"
            />
            <el-table-column
              prop="type"
              label="支付方式"
            />
            <el-table-column
              prop="status"
              label="處理狀態"
            />
            <el-table-column
              prop="commission"
              label="佣金"
            />
            <el-table-column
              prop="group_commission"
              label="組佣金"
            />
            <el-table-column
              prop="create_date"
              label="創建時間"
            />
            <el-table-column
              prop="processed_date"
              label="處理時間"
            />
          </el-table>
        </el-main>
      </el-container>
    </div>
    <div class="block">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

 

js部分

data() {
    return {
      formInline: {
        serch: ''
      },
      tableData: [],
      token: '',
      currentPage: 1,
      page_size: 10,
      total: 400
    }
  },

 

// 每頁多少條
    handleSizeChange(val) {
      this.page_size = val
      this.binddatas() // 數據更改后調用請求方法
      console.log(`每頁 ${val} 條`)
    },
    // 當前在第幾頁
    handleCurrentChange(val) {
      this.currentPage = val
      this.binddatas() // 數據更改后調用請求方法
      console.log(`當前頁: ${val}`)
    },