【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}`)
    },