vue+饿了么做分页和表格查询并且实现交互

最新推荐文章于 2025-06-25 09:19:02 发布

原创最新推荐文章于 2025-06-25 09:19:02 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #element #table #anxios #查询

本文详细介绍了如何在前端实现分页功能，通过与后端交互获取数据，并展示了如何使用Element UI组件实现动态分页。同时，文章还讲解了查询功能的实现，包括日期选择和输入框查询的整合，以及如何通过拼接URL参数来请求特定条件下的数据。

先说分页，一页显示十条数据，和后台商量了的是在地址后面拼一个字符串，拼1后台就返回第一页的数据展示在页面上。
如 http://xxx/attendance/record/1 后台直接返回第一页的 /2就是返回第二页的数据

<div style="text-align: center;margin-top: 20px">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="1"
      layout="total, prev, pager, next"
      :total="total"     // total是一个全局变量，在第一次刷新页面请求到的所有数据就会进行判断，是后台返回的
    >
    </el-pagination>
  </div>

handleCurrentChange (currentPage) {  //点击页码，展示当前页码的数据
        this.tableData.splice(0,10)；  //每点击的时候先把当页数据删掉
        this.currentPage = currentPage;  //页码
        this.a = currentPage;
        var url ='http://xxxx/attendance/record/stats/'+this.a;
        this.axios.get(url).then((res) => {
          for(let i =0;i<res.data.data.data.length;i++){    //数据渲染
            let tableTemp={};
            tableTemp.name=res.data.data.data[i].name;
            tableTemp.location=res.data.data.data[i].location;
            tableTemp.type=res.data.data.data[i].type;
            tableTemp.time=res.data.data.data[i].time;
            this.tableData.push(tableTemp);
          }
        })
      },

关于查询，是请求一个拼接后的网址，如 http://xxx/attendance/record/1？name=“xxx”&age=“xx” 在后面拼接参数
这里是一个选择日期并输入框查询名字相关信息：

<div>
<el-date-picker
    v-model="value1"
    value-format="yyyy-MM"    //返回的日期格式
    type="month"
    placeholder="请选择月份">
  </el-date-picker>
<el-input v-model="name" placeholder="姓名"></el-input>
<el-button type="primary" v-on:click="getUsers">查询</el-button>
</div>

data里面一个是双向绑定输入框里面的值，condition是一个全局变量，用来存放拼接的参数

data(){
value:'',
value1：‘’，
condition:''}

方法中：

getUsers(){
        this.condition=null;           //让他为空，不然每次点击都会拼一次
        var url = http://xxx/attendance/record/stats/1?';
        if(this.value1.length !== 0){         //判断选没选日期
          this.condition+= "&date=" +this.value1;
        } //日期
          if(this.value.length !== 0){     //判断输入框有没有输入名字
            this.condition+= "&name=" +this.value;
          } //名字
          console.log(url+this.condition);    //请求的地址出来了，按照正常方法请求就可以了

请求到的数据后台就返回过来了