一、问题
使用post方法访问api,拿到数据之后,与el-teble表格进行绑定,并在搜索框中通过关键词来进行表格数据的搜索。
二、方法
本篇文章使用的是axios发送post实现的,实现步骤如下:
- 首先安装axios,安装指令:
- 安装之后,在main.js文件里面引入axios:
- 先写一个搜索框和搜索按钮出来
- 使用el-table表格,这是element-ui里面的表格,所以要先引入elemeng-ui,在main.js里面引入,引入之前进行安装,在控制端中安装指令是:
在main.js文件引入,代码如下: - 5、然后就可以使用el-table标签了
:data=”tableData”,意思是表格的数据来源于tableData,所以现在要在script里面给定一个tableData列表
表格中每一列的数据是通过prop来进行绑定的,因为要使用到api的数据,所以这里prop的命名要与api相对应的数据命名一样,这里写了两列。分别是id和name
6、写方法函数进行post请求拿到api里面的数据
methods里面就用来放方法,created是vue里面的一个生命周期钩子函数,vue实例被生成之后就会调用这个函数,换言之,页面初始化的时候调用这个函6.1、写入方法getPageData
6.2、使用axios发送post请求
里面有三个需要注意的,url就是api的地址,data通过传入的参数来进行发送post请求,config中headers就是请求的配置,拿到数据之后用response储存起来,这样response就是我们拿到的api里的数据了,拿到之后我们要把api里拿到的数据给tableData
api里面列表数据是records,所以在给tableData的时候是把这个列表赋值给它
6.3、在created里面,是页面创建的时候调用该方法
7、将api的数据渲染到页面el-table里面
prop的命名要和api里面,你要渲染到页面上的数据命名一样,通过prop绑定之后,数据会自动识别,进行渲染。
8、实现搜索
8.1、在input里面绑定回车事件,按钮绑定点击事件,绑定回车事件时使用@keyup.enter=”查询方法名”,绑定点击事件使用@click,下图getSearchPage为搜索的方法,使用v-model获取input里面输入的值,赋值给search参数。
9、搜索方法实现
定义一个search来接收input里面输入的值
然后getSearchPage也是通过post请求拿到数据,但是这次是通过name来拿到数据
search就是获取的输入框里的关键词
如果说我们输入123,那这里name就为name:”123”,这样拿到的数据就是关于123的几条数据。这样搜索功能就实现了。
10、实现el-table分页
10.1、需要定义的变量
在el-table里面添加分页代码
10.2、在表格代码下写下分页器代码
@size-change就是改变一页数据的大小
@current-change就是改变第几页,:page-size=”[1,5,10,20]”就是一页有多少条数据的选择。
实现的效果就是如下图:
这样就实现了使用post请求拿到数据渲染到el-table上面,并且实现了分页。
三、实验结果与讨论
代码清单 1
<template> <div class="search"> <input vaule="请输入关键词" v-model="search" @keyup.enter="getSearchPage"></input> <input type="button" @click="getSearchPage"></input> </div> <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" > <el-table-column prop="id" > </el-table-column> <el-table-column prop="name" > </el-table-column> </el-table> <div class="block" style="margin-top:15px;"> <el-pagination align='center' @size-change="changePageSize" @current-change="changePageCurrent" :current-page="currentPage" :page-sizes="[1,5,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"> </el-pagination> </div> </template> <script> import axios from "axios"; export default { data(){ return{ //分页 currentPage: 1, // 当前页码 total: 20, // 总条数 pageSize: 5, // tableData:[] } }, created() { this.getPageData() }, methods:{ getPageData(){ axios.post("",{},{ headers:{ } }).then(response=>{ this.tableData = response.data.data.records }) }, getSearchPage() { axios.post("",{name:`${this.search}`},{ headers:{ } }).then(response=>{ this.tableData=response.data.data.records }) }, changePageSize(pageSize) { this.currentPage = 1; this.pageSize = pageSize; }, changePageCurrent(pageNum) { this.currentPage = pageNum; }, } } </script> <style scoped> </style>
四、结语
本片文章并没有给出api地址,提供一个思路,所以上述代码只是为了提供一个思路,在post请求访问api的时候,需要注意的是一定要写入参数,如{id,name},没有参数,post请求发送失败。搜索的实现也是,只不过搜索的实现是通过获取到input输入框里面的关键词,赋值给post请求传入参数里面的api的变量,这样post请求发送之后就只会拿到和关键词相关的数据。