flask+vue:创建一个数据列表并实现简单的查询功能(二)
2023-09-11 14:21:25 时间
昨天写了一个简单的数据列表,传送门:flask+vue:创建一个数据列表并实现简单的查询功能(一)
上述功能中还存在着几个缺陷:
1、进入这个菜单后,没有自动触发请求获取数据,导致页面为空;
2、切换页码或者重新选择每页条数后,没有自动重新加载数据,需要点一下查询按钮才行;
3、切换页码或者点击查询获取数据时,视觉上没有动态加载效果
本篇博客针对上述问题进行一些优化
在methods下新增一个方法query_data()
它里面的代码其实和submitForm()
方法中的代码一样,都是获取前端参数发送请求,然后获取后端返回的数据(只是这个方法中不传任何参数)
query_data() { let url1 = "http://127.0.0.1:5000/" let payload = { class_type: this.form.class, create_date: this.form.create_date, page_num: this.currentPage, page_size: this.pageSize } axios({ timeout: 10000, method: "get", params: payload, //发送get请求,使用params关键字接收请求参数 url: url1+"api/select_data" }).then(res => { let data_list = res.data.records.map(function(array) { let rObj = {}; rObj["date"] = array[2] rObj["type"] = array[0] rObj["value"] = array[1] return rObj;}) console.log(data_list) this.tableData = data_list // let data_count = res.data.count this.count = res.data.count if(res.data.code === 200){ //判断响应中的code是否为200 console.log(res.data) } else{ console.log(res.data) } }).catch((reason)=>{ console.log(reason) this.button_mark = false this.$message({ message: '接口调用失败,请检查系统是否正常', type: 'warning' }); }) }
1、打开列表菜单,自动触发请求
要实现这个功能,可以在<script>标签下添加生命周期钩子函数created()
然后把query_data()
放在下面,这样每当进入这个页面后就会调用query_data()
2、切换页码或者重新选择每页条数后,自动重新加载数据
这个只需要在handleSizeChange()
和handleCurrentChange()
下调用query_data()
即可,这样的话,当页码切换或者每页条数变更后会自动触发这2个事件,也会调用里面的query_data()
方法,自动触发请求并传入当前的页码和每页条数
3、给列表添加loading加载提示
使用Loading 加载
组件给列表添加动态加载效果
在<el-table>标签下添加v-loading
指令
在data()下新增一个参数loading,默认为false
当发起请求时,把loading值置为true,请求结束后把loading值置为false即可
整体效果如下
相关文章
- Ant Design Of Vue 组件库中获取 <a-range-picker>日期滑块选择器的参数
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue商城项目开发:axios发送请求及列表数据展示
- Atitit vue.js 把ajax数据 绑定到form表单
- vue页面交互-弹窗关闭后刷新父页面时取消选中数据展示列表里的复选框
- vue - chunk-vendors.js文件太大,实现拆分打包的具体配置
- 基于Vue实现多标签选择器
- Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- Vue——风格指南
- Vue中vue-i18n结合element-ui实现国际化
- 073:vue+openlayers拖拽实现放大所选区域 (DragZoom示例代码)
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue.js 目录结构
- Vue:第一个vue-cli项目
- Vue学习笔记——vue-router