查询页总结

134 阅读 0 评论 89 点赞

我是靠谱客的博主搞怪蛋挞，这篇文章主要介绍查询页总结，现在分享给大家，希望可以做个参考。

最近做了好多查询页，总结一下查询页所能用到的一些东西和功能展现，查询页应该是后台管理系统中相对较简单的页面了对于自己这种新手小白来说，既然做了一下，就总结一下查询页注意的知识点，以便于自己后期用来复习和知识的加深，不断的积累经验

查询页主要就是表单和表格的组成，上面是表单，也就是筛选条件，查询、重置按钮，下面是根据查询所能查到的列表数据。是一个表格。查询页主要是有查询接口在查询按钮绑定一个事件@click="getsearchList" 在方法里调查询接口就可以查询到列表数据。重置则是把表单里的数据都清空，用this.$refs.form.resetFileds() ,或者也可以单个置空。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
重置
resetClick() {
    this.form.startDate ="";
    this.form.endDate = "";
    this.form.name = "";
    this.form.sex = "";
    this.getSearchList()
    this.total = 0;
}

//重置

resetClick() {
    this.$refs.form.resetFileds() 
    this.getSearchList()
    this.total = 0;
}

第二点就是查询调查询的接口，传需要的参数，第三点就是查询页一般都要分页，element-UI有组件，这里要注意的是查分页时要在传参数的同时把分页一起带过去。然后把返回的再赋值给表格。

注意的点：

1.是在点击重置的时候，需要针对分页设置为第一页 && 当前要显示的页数为 10页等，

2.点击查询的时候，需要针对分页设置为第一页 && 当前要显示的页数为 10页等

3.点击查询后查询到数据，最后再刷新一遍，也就是再调一次查询接口

ElementUI分页组件代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
 <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>

在data里面去定义

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
     //获取用户列表的参数对象
     queryInfo: {
      query: "",
      //当前页数
      pagenum: 1,
      //每页数据大小
      pagesize: 2,
     },
     
     //总数据量
     total: 0,
     //数据
     userList: []

在methods里面去定义两个方法用于监听pagesize和pagenum的改变

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
   // 监听pagesize改变的事件
   handleSizeChange(newSize) {
     this.queryInfo.pagesize = newSize;
     this.getGoodsList();
   },
   
   //监听多少页值改变的事件
   handleCurrentChange(newPage) {
     this.queryInfo.pagenum = newPage;
     this.getGoodsList();
   }

表格数据展示的代码

复制代码

1
2
3
4
5
6
7
8
9
10
 <!-- 用户列表区 -->
 <el-table :data="userList" style="width: 100%" border stripe>
   <el-table-column type="index"></el-table-column>
   <el-table-column prop="username" label="姓名"></el-table-column>
   <el-table-column prop="email" label="邮箱"></el-table-column>
   <el-table-column prop="mobile" label="电话"> </el-table-column>
   <el-table-column prop="role_name" label="角色"> </el-table-column>
   <el-table-column prop="mg_state" label="状态">
 </el-table>

如遇某一列，类似状态这列调接口写法应该就是加一个插槽，在里面用插槽的写法判断，如遇后端返回某一列是数字 123之类的话前端需要把它转化成数字所对应的中文，值比较少的话两个可以用三元表达式进行判断，例如

复制代码

1
2
3
4
5
6
7
<el-table-column type="index"></el-table-column>
   <el-table-column prop="username" label="姓名"></el-table-column>
  <el-table-column  prop="itemDetail" label="押品详情" min-width="120">
    <template slot-scope="scope">
        <span>{{ scope.row.itemDetail == 0? '土地房产面积'：'机器设备名称'}}</span>
    </template>
   </el-table-column>

还可以在某一列加上formatter这个属性，用于转化成中文。