机票列表页

渲染列表数据

项目GitHub地址：https://github.com/q2419068625/xianyun
1.请求接口数据

<template><section class="contianer"><!-- 其他代码... --><!-- 航班信息 --><div><!-- 航班列表 --><flightsItem v-for="(item, index) in dataList" :key="index" :data="item"/></div><!-- 其他代码... --> </section> </template> <script> // 其他代码... export default {data(){return {flightsData: {}, // 航班总数据dataList: [] // 航班列表数据，用于循环flightsItem组件，单独出来是因为要分页}},// 其他代码...methods: {// 获取航班总数据getData(){this.$axios({url: `airs`,params: this.$route.query // 来自URL的5个参数}).then(res => {this.flightsData = res.data;this.dataList = this.flightsData.flights;});}},mounted(){this.getData();} } </script>

2.渲染列表组件

<template><div class="flight-item"><div><!-- 显示的机票信息 --><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时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">低价推荐</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>

计算相差时间

计算起飞时间到到达时间的时间间隔。

<template><div class="flight-item"><!-- 其他代码... --><el-col :span="8" class="flight-time"><span>{{rankTime}}</span></el-col><!-- 其他代码... --> </div> </template><script> export default {// 其他代码...computed: {// 计算出相差时间rankTime(){// 转化为分钟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];// 到达时间相减得到分钟let dis = arrVal - depVal;// 如果是第二天凌晨时间段，需要加24小时if(dis < 0){dis = arrVal + 24 * 60 - depVal;}// 得到相差时间return `${ Math.floor(dis / 60)}时${dis % 60}分`}} } </script>

分页

处理分页的两个关键元素，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"/><!-- 分页 --><el-row type="flex" justify="center" style="margin-top:10px;"><!-- size-change：切换条数时候触发 --><!-- current-change：选择页数时候触发 --><!-- current-page: 当前页数 --><!-- page-size：当前条数 --><!-- total：总条数 --><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, // 当前页数pageSize: 5, // 显示条数}},// 其他代码...methods: {// 获取航班总数据getData(){this.$axios({url: `airs`,params: this.$route.query // 来自URL的5个参数}).then(res => {this.flightsData = res.data;// this.dataList = this.flightsData.flights;this.setDataList(); // 初始化dataList数据，获取1 - 10条});},// 设置dataList数据setDataList(){const start = (this.pageIndex - 1) * this.pageSize; const end = start + this.pageSize; this.dataList = this.flightsData.flights.slice(start, end);},// 切换条数时触发handleSizeChange(value){this.pageSize = value;this.pageIndex = 1;this.setDataList();},// 切换页数时触发handleCurrentChange(value){this.pageIndex = value;this.setDataList();},},// 其他代码... } </script>

条件过滤

<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="起飞机场" @change="handleAirport"><el-optionlabel="白云机场"value="白云机场"></el-option></el-select></el-col><el-col :span="4"><el-select size="mini" v-model="flightTimes" value-key="" placeholder="起飞时间" @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="厦门航空"value="厦门航空"></el-option></el-select></el-col><el-col :span="4"><el-select size="mini" v-model="airSize" placeholder="机型" @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: "", // 机场flightTimes: "", // 出发时间company: "", // 航空公司airSize: "", // 机型大小}},methods: {// 选择机场时候触发handleAirport(value){},// 选择出发时间时候触发handleFlightTimes(value){},// 选择航空公司时候触发handleCompany(value){},// 选择机型时候触发handleAirSize(value){},// 撤销条件时候触发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="起飞时间" @change="handleFlightTimes"><el-optionlabel="00:00 - 06:00"value="1"></el-option></el-select>

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识
如果不指定 value-key 不管怎么选，页面上的数据都只显示最后一个数据
这个可以去看官方文档 https://element.eleme.cn/#/zh-CN/component/select#methods

过滤列表!

1.过滤条件触发时候需要修改数组列表flightsData.flights，这样原来的列表就会被覆盖了，所以需要缓存一份列表用于根据条件提取数据。

<template><section class="contianer"><!-- 其他代码... --><!-- 过滤条件 --><!-- data 是不会被修改的列表数据 --><!-- setDataList 用于修改过滤后的数组列表 --><FlightsFilters :data="cacheFlightsData" @setDataList="setDataList"/><!-- 其他代码... --></section> </template><script> // 其他代码...export default {data(){return {// 其他代码...cacheFlightsData: { // 缓存一份数据，只会修改一次flights: [], info: {},options: {}}, // 其他代码...}},// 其他代码...methods: {// 获取航班总数据getData(){this.$axios({url: `airs`,params: this.$route.query}).then(res => {this.flightsData = res.data;// 缓存一份新的列表数据数据，这个列表不会被修改// 而flightsData会被修改this.cacheFlightsData = {...res.data};this.setDataList();});},// 设置dataList数据// arr是展示的新数据，该方法将会传递给过滤组件使用setDataList(arr){// 如果有新数据从第一页开始显示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>

撤销条件

初始化所有条件，还原数据列表。

// 撤销条件时候触发handleFiltersCancel(){this.airport = "";this.flightTimes = "";this.company = "";this.airSize = "";this.$emit("setDataList", this.data.flights);},

总结

本节重点在过滤列表的实现，但是实现并非只有这一种方法，目的是想在缓存数据的方法中能达到举一反三，这也是编程开发时常见的手段

总结

以上是生活随笔为你收集整理的闲云旅游网04（基于vue+element ui）完成机票数据列表渲染的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。