Vue+ElementUI項(xiàng)目筆記(五、調(diào)用接口+分頁(yè))

模板

   <template>
<!--相關(guān)航班信息-->
<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="序號(hào)" align='center'></el-table-column>
        <el-table-column property="plan_fry_date" fixed label="出發(fā)日期" align='center'></el-table-column>
        <el-table-column property="flight_no" label="航班號(hào)" align='center'></el-table-column>
        <el-table-column property="departure_name" label="起飛機(jī)場(chǎng)" 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="計(jì)飛" align='center'></el-table-column>
        <el-table-column property="destination_city_name" label="降落機(jī)場(chǎng)" 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="計(jì)降" align='center'></el-table-column>
        <el-table-column property="is_domestic" label="有貨" align='center'></el-table-column>
        <el-table-column property="model_code" label="機(jī)型" align='center'></el-table-column>
        <el-table-column property="in_stock" label="客貨機(jī)" 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>
    調(diào)用接口
    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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容