Vue+ElementUI项目笔记（五、调用接口+分页）

模板

   <template>
<!--相关航班信息-->
<div class="flightHome">
    <el-table ref="singleTable" size="small" align='center' :data="flightList" 
        highlight-current-row @current-change="select" border max-height="330">
        <el-table-column property="index" fixed type="index" :index="indexMethod" label="序号" align='center'></el-table-column>
        <el-table-column property="plan_fry_date" fixed label="出发日期" align='center'></el-table-column>
        <el-table-column property="flight_no" label="航班号" align='center'></el-table-column>
        <el-table-column property="departure_name" label="起飞机场" align='center'></el-table-column>
        <el-table-column property="plan_fry_time" label="起飞" align='center'></el-table-column>
        <el-table-column property="plan_fry_time" label="计飞" align='center'></el-table-column>
        <el-table-column property="destination_city_name" label="降落机场" align='center'></el-table-column>
        <el-table-column property="plan_drop_time" label="降落" align='center'></el-table-column>
        <el-table-column property="plan_drop_time" label="计降" align='center'></el-table-column>
        <el-table-column property="is_domestic" label="有货" align='center'></el-table-column>
        <el-table-column property="model_code" label="机型" align='center'></el-table-column>
        <el-table-column property="in_stock" label="客货机" align='center'></el-table-column>
    </el-table>
    <div align="center">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currPage"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <book-info />
    </div>
</template>

交互

  <script>
    调用接口
    import {getFlightInfo} from '../../service'
    export default {
   name: 'flightHome',
   data() {
     return {
       resource: '',
        flightList: [],
        pagesize: 10,
        highlightId: -1,
        currPage: 1,
        start: 1,
        total:10,
    }
},
methods: {
          getFlight() {
        getFlightInfo({currPage:this.currPage, order_three_code: this.orderNo.slice(0,3)}).then(res => {
            if(res.data.status === 200) {
                this.flightList = res.data.data[0].list
                this.total = res.data.data[0].total
            }
        })
    },
    handleCurrentChange: function(currentPage){ 
        this.currPage = currentPage; 
        this.getFlight()
    },
    indexMethod(index) {
        return (this.currPage - 1)*10 + index + 1
    },
   }
 }
</script>