闲云旅游网04（基于vue+element ui）完成机票数据列表渲染
生活随笔
收集整理的這篇文章主要介紹了
闲云旅游网04（基于vue+element ui）完成机票数据列表渲染
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
機(jī)票列表頁(yè)
渲染列表數(shù)據(jù)
項(xiàng)目GitHub地址：https://github.com/q2419068625/xianyun
1.請(qǐng)求接口數(shù)據(jù)
2.渲染列表組件
<template><div class="flight-item"><div><!-- 顯示的機(jī)票信息 --><el-row type="flex" align="middle" class="flight-info"><el-col :span="6"><span>{{data.airline_name}}</span> {{data.flight_no}}</el-col><el-col :span="12"><el-row type="flex" justify="space-between" class="flight-info-center"><el-col :span="8" class="flight-airport"><strong>{{data.dep_time}}</strong><span>{{data.org_airport_name}}{{data.org_airport_quay}}</span></el-col><el-col :span="8" class="flight-time"><span>2時(shí)20分</span></el-col><el-col :span="8" class="flight-airport"><strong>{{data.arr_time}}</strong><span>{{data.dst_airport_name}}{{data.dst_airport_quay}}</span></el-col></el-row></el-col><el-col :span="6" class="flight-info-right">￥<span class="sell-price">{{data.seat_infos[0].org_settle_price_child}}</span>起</el-col></el-row></div><div class="flight-recommend"><!-- 隱藏的座位信息列表 --><el-row type="flex" justify="space-between" align="middle"><el-col :span="4">低價(jià)推薦</el-col><el-col :span="20"><el-row type="flex" justify="space-between" align="middle" class="flight-sell"v-for="(item, index) in data.seat_infos":key="index"><el-col :span="16" class="flight-sell-left"><span>{{item.name}}</span> | {{item.supplierName}}</el-col><el-col :span="5" class="price">￥{{item.org_settle_price}}</el-col><el-col :span="3" class="choose-button"><el-button type="warning" size="mini">選定</el-button><p>剩余：{{item.discount}}</p></el-col></el-row></el-col></el-row></div></div> </template>計(jì)算相差時(shí)間
計(jì)算起飛時(shí)間到到達(dá)時(shí)間的時(shí)間間隔。
<template><div class="flight-item"><!-- 其他代碼... --><el-col :span="8" class="flight-time"><span>{{rankTime}}</span></el-col><!-- 其他代碼... --> </div> </template><script> export default {// 其他代碼...computed: {// 計(jì)算出相差時(shí)間rankTime(){// 轉(zhuǎn)化為分鐘const dep = this.data.dep_time.split(":");const arr = this.data.arr_time.split(":");const depVal = dep[0] * 60 + +dep[1];const arrVal = arr[0] * 60 + +arr[1];// 到達(dá)時(shí)間相減得到分鐘let dis = arrVal - depVal;// 如果是第二天凌晨時(shí)間段，需要加24小時(shí)if(dis < 0){dis = arrVal + 24 * 60 - depVal;}// 得到相差時(shí)間return `${ Math.floor(dis / 60)}時(shí)${dis % 60}分`}} } </script>分頁(yè)
處理分頁(yè)的兩個(gè)關(guān)鍵元素，pageIndex和pageSize。
<template><section class="contianer"><el-row type="flex" justify="space-between"><!-- 其他代碼... --><!-- 航班信息 --><div><!-- 航班列表 --><flightsItem v-for="(item, index) in dataList" :key="index" :data="item"/><!-- 分頁(yè) --><el-row type="flex" justify="center" style="margin-top:10px;"><!-- size-change：切換條數(shù)時(shí)候觸發(fā) --><!-- current-change：選擇頁(yè)數(shù)時(shí)候觸發(fā) --><!-- current-page: 當(dāng)前頁(yè)數(shù) --><!-- page-size：當(dāng)前條數(shù) --><!-- total：總條數(shù) --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageIndex":page-sizes="[5, 10, 15, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="flightsData.total"></el-pagination></el-row></div></div><!-- 其他代碼... --></el-row></section> </template><script> // 其他代碼...export default {data(){return {// 其他代碼...pageIndex: 1, // 當(dāng)前頁(yè)數(shù)pageSize: 5, // 顯示條數(shù)}},// 其他代碼...methods: {// 獲取航班總數(shù)據(jù)getData(){this.$axios({url: `airs`,params: this.$route.query // 來(lái)自URL的5個(gè)參數(shù)}).then(res => {this.flightsData = res.data;// this.dataList = this.flightsData.flights;this.setDataList(); // 初始化dataList數(shù)據(jù)，獲取1 - 10條});},// 設(shè)置dataList數(shù)據(jù)setDataList(){const start = (this.pageIndex - 1) * this.pageSize; const end = start + this.pageSize; this.dataList = this.flightsData.flights.slice(start, end);},// 切換條數(shù)時(shí)觸發(fā)handleSizeChange(value){this.pageSize = value;this.pageIndex = 1;this.setDataList();},// 切換頁(yè)數(shù)時(shí)觸發(fā)handleCurrentChange(value){this.pageIndex = value;this.setDataList();},},// 其他代碼... } </script>條件過(guò)濾
<template><div class="filters"><el-row type="flex" class="filters-top" justify="space-between" align="middle"><el-col :span="8">單程： 廣州 - 上海 / 2019-06-17</el-col><el-col :span="4"><el-select size="mini" v-model="airport" placeholder="起飛機(jī)場(chǎng)" @change="handleAirport"><el-optionlabel="白云機(jī)場(chǎng)"value="白云機(jī)場(chǎng)"></el-option></el-select></el-col><el-col :span="4"><el-select size="mini" v-model="flightTimes" value-key="" placeholder="起飛時(shí)間" @change="handleFlightTimes"><el-optionlabel="00:00 - 06:00"value="1"></el-option></el-select></el-col><el-col :span="4"><el-select size="mini" v-model="company" placeholder="航空公司" @change="handleCompany"><el-optionlabel="廈門(mén)航空"value="廈門(mén)航空"></el-option></el-select></el-col><el-col :span="4"><el-select size="mini" v-model="airSize" placeholder="機(jī)型" @change="handleAirSize"><el-optionlabel="大"value="大"></el-option></el-select></el-col></el-row><div class="filter-cancel">篩選：<el-button type="primary" round plain size="mini" @click="handleFiltersCancel">撤銷</el-button></div></div> </template><script> export default {data(){return {airport: "", // 機(jī)場(chǎng)flightTimes: "", // 出發(fā)時(shí)間company: "", // 航空公司airSize: "", // 機(jī)型大小}},methods: {// 選擇機(jī)場(chǎng)時(shí)候觸發(fā)handleAirport(value){},// 選擇出發(fā)時(shí)間時(shí)候觸發(fā)handleFlightTimes(value){},// 選擇航空公司時(shí)候觸發(fā)handleCompany(value){},// 選擇機(jī)型時(shí)候觸發(fā)handleAirSize(value){},// 撤銷條件時(shí)候觸發(fā)handleFiltersCancel(){},} } </script><style scoped lang="less">.filters{margin-bottom:20px;}.filters-top{> div{/deep/ .el-select{margin-left:10px;}}}.filter-cancel{margin-top:10px;} </style> <el-select size="mini" v-model="flightTimes" value-key="" placeholder="起飛時(shí)間" @change="handleFlightTimes"><el-optionlabel="00:00 - 06:00"value="1"></el-option></el-select>如果 Select 的綁定值為對(duì)象類型，請(qǐng)務(wù)必指定 value-key 作為它的唯一性標(biāo)識(shí)
如果不指定 value-key 不管怎么選，頁(yè)面上的數(shù)據(jù)都只顯示最后一個(gè)數(shù)據(jù)
這個(gè)可以去看官方文檔 https://element.eleme.cn/#/zh-CN/component/select#methods
過(guò)濾列表!
1.過(guò)濾條件觸發(fā)時(shí)候需要修改數(shù)組列表flightsData.flights，這樣原來(lái)的列表就會(huì)被覆蓋了，所以需要緩存一份列表用于根據(jù)條件提取數(shù)據(jù)。
<template><section class="contianer"><!-- 其他代碼... --><!-- 過(guò)濾條件 --><!-- data 是不會(huì)被修改的列表數(shù)據(jù) --><!-- setDataList 用于修改過(guò)濾后的數(shù)組列表 --><FlightsFilters :data="cacheFlightsData" @setDataList="setDataList"/><!-- 其他代碼... --></section> </template><script> // 其他代碼...export default {data(){return {// 其他代碼...cacheFlightsData: { // 緩存一份數(shù)據(jù)，只會(huì)修改一次flights: [], info: {},options: {}}, // 其他代碼...}},// 其他代碼...methods: {// 獲取航班總數(shù)據(jù)getData(){this.$axios({url: `airs`,params: this.$route.query}).then(res => {this.flightsData = res.data;// 緩存一份新的列表數(shù)據(jù)數(shù)據(jù)，這個(gè)列表不會(huì)被修改// 而flightsData會(huì)被修改this.cacheFlightsData = {...res.data};this.setDataList();});},// 設(shè)置dataList數(shù)據(jù)// arr是展示的新數(shù)據(jù)，該方法將會(huì)傳遞給過(guò)濾組件使用setDataList(arr){// 如果有新數(shù)據(jù)從第一頁(yè)開(kāi)始顯示if(arr){ this.pageIndex = 1;this.flightsData.flights = arr;this.flightsData.total = arr.length;}const start = (this.pageIndex - 1) * this.pageSize; const end = start + this.pageSize; this.dataList = this.flightsData.flights.slice(start, end);},// 其他代碼...},// 其他代碼... } </script>撤銷條件
初始化所有條件，還原數(shù)據(jù)列表。
// 撤銷條件時(shí)候觸發(fā)handleFiltersCancel(){this.airport = "";this.flightTimes = "";this.company = "";this.airSize = "";this.$emit("setDataList", this.data.flights);},總結(jié)
本節(jié)重點(diǎn)在過(guò)濾列表的實(shí)現(xiàn)，但是實(shí)現(xiàn)并非只有這一種方法，目的是想在緩存數(shù)據(jù)的方法中能達(dá)到舉一反三，這也是編程開(kāi)發(fā)時(shí)常見(jiàn)的手段
總結(jié)
以上是生活随笔為你收集整理的闲云旅游网04（基于vue+element ui）完成机票数据列表渲染的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 闲云旅游网01（基于vue+elemen
- 下一篇： html5倒计时秒杀怎么做,vue 设