机票列表页

渲染列表数据

项目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）完成机票数据列表渲染相关推荐

基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
闲云旅游网02（基于vue+element ui）
首页开发项目GitHub地址:https://github.com/q2419068625/xianyun 新建公共组件在components中新建应用统一的头部组件和页脚组件. 在默认布局中la ...
闲云旅游网01（基于vue+element ui）
1.初始化项目使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxtjs项目. npx create-nuxt-app xianyun 需要等待片刻安装依赖的下载,下载完成后可以 ...
闲云旅游网03（基于vue+element ui）登录注册功能开发
登录功能项目GitHub地址:https://github.com/q2419068625/xianyun 新建登录注册页的布局新建了登录的表单绑定了数据到data rules表单的验证提交数 ...
vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能导出功能截图二.安装相关依赖 cnpm install --save xl ...
Vue + Element UI 中国省市区数据三级联动
安装数据 npm install element-china-area-data 页面引入 import { provinceAndCityData, regionData, provinceAndC ...
一个基于.Net Core+Vue+Element Ui开发的OA系统
今天给大家推荐一个开源OA系统. 项目简介这是一个基于.Net Core构建的简单.跨平台OA系统.企业可以利用它进行信息化建设,框架提供了用户管理.权限管理.表引擎.流程引擎.BI智能报表,可以大 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...

闲云旅游网04（基于vue+element ui）完成机票数据列表渲染

机票列表页

渲染列表数据

计算相差时间

分页

条件过滤

过滤列表`!`

撤销条件

总结

闲云旅游网04（基于vue+element ui）完成机票数据列表渲染相关推荐

最新文章

热门文章

闲云旅游网04（基于vue+element ui）完成机票数据列表渲染

机票列表页

渲染列表数据

计算相差时间

分页

条件过滤

过滤列表!

撤销条件

总结

闲云旅游网04（基于vue+element ui）完成机票数据列表渲染相关推荐

最新文章

热门文章

过滤列表`!`