标签：vue flask res 列表 loading let query data 加载

昨天写了一个简单的数据列表，传送门：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即可

整体效果如下

 

标签：vue,flask,res,列表,loading,let,query,data,加载
来源： https://www.cnblogs.com/hanmk/p/15812139.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。