发送post请求渲染el-table，并实现搜索和分页功能

青旅半醒 2024-04-05 07:27 15阅读 0赞

**一、问题**

使用post方法访问api，拿到数据之后，与el-teble表格进行绑定，并在搜索框中通过关键词来进行表格数据的搜索。

**二、方法**

本篇文章使用的是axios发送post实现的，实现步骤如下：

1.  首先安装axios，安装指令：
    
    ![5a3a04ed497badec3b5eba96d7be05f2.png][]
2.  安装之后，在main.js文件里面引入axios：
    
    ![50c1ba2f85adf0429b43535d5a539d1a.png][]
3.  先写一个搜索框和搜索按钮出来  
    
    
    ![a3d2d3642bb95d23aa7f557c3bd18114.png][]
4.  使用el-table表格，这是element-ui里面的表格，所以要先引入elemeng-ui，在main.js里面引入，引入之前进行安装，在控制端中安装指令是：
    
    ![3ab9bff8426926a29ab5ae8df44ebaa4.png][]
    
    在main.js文件引入，代码如下：

![bfe0475d021fff1cb22b731f63575e87.png][]

5、然后就可以使用el-table标签了

![7ab6ae7d333185310be914038f6ee60d.png][]

:data=”tableData”，意思是表格的数据来源于tableData，所以现在要在script里面给定一个tableData列表

![60cc6942834b435c7a3b123894523261.png][]

表格中每一列的数据是通过prop来进行绑定的，因为要使用到api的数据，所以这里prop的命名要与api相对应的数据命名一样，这里写了两列。分别是id和name

![368d29fca0acfd779576d8548ebc7166.png][]

6、写方法函数进行post请求拿到api里面的数据

![8e6b612de507f0f86fd358ab3b7a8f0f.png][]

methods里面就用来放方法，created是vue里面的一个生命周期钩子函数，vue实例被生成之后就会调用这个函数，换言之，页面初始化的时候调用这个函6.1、写入方法getPageData  
![1485cefc31b41d3f633f78f8469af960.png][]  
6.2、使用axios发送post请求

![cfd323827c2bebde69f1373ccfa10dfe.png][]

里面有三个需要注意的，url就是api的地址，data通过传入的参数来进行发送post请求，config中headers就是请求的配置，拿到数据之后用response储存起来，这样response就是我们拿到的api里的数据了，拿到之后我们要把api里拿到的数据给tableData

![0197e7e123ab94c67beb4f8f37c58b73.png][]

api里面列表数据是records，所以在给tableData的时候是把这个列表赋值给它

![c7805917eb1abe4a6ff010598662fbde.png][]

6.3、在created里面，是页面创建的时候调用该方法

![125a1f58794e73a2a152229349dc1171.png][]

7、将api的数据渲染到页面el-table里面  
prop的命名要和api里面，你要渲染到页面上的数据命名一样，通过prop绑定之后，数据会自动识别，进行渲染。

![9053b2d8852e9f1baccd9dd04124c236.png][]

![bd1da0bee98d54f3f163050826069331.png][]

![ab9ceec28ac5c4d2e9f280b809ed0244.png][]

8、实现搜索  
8.1、在input里面绑定回车事件，按钮绑定点击事件，绑定回车事件时使用@keyup.enter=”查询方法名”，绑定点击事件使用@click,下图getSearchPage为搜索的方法，使用v-model获取input里面输入的值，赋值给search参数。

![2ff6be76c5b009e3f777cda077139c30.png][]

9、搜索方法实现

定义一个search来接收input里面输入的值

![c073f3ed31298b32faaf776110c11bcc.png][]

然后getSearchPage也是通过post请求拿到数据，但是这次是通过name来拿到数据

![6797194bce445d855bc38a39aa68578f.png][]

search就是获取的输入框里的关键词  
如果说我们输入123，那这里name就为name:”123”,这样拿到的数据就是关于123的几条数据。这样搜索功能就实现了。

10、实现el-table分页

10.1、需要定义的变量

![ff1deec1ab31dde1ca101acd0cc4c8d0.png][]

在el-table里面添加分页代码

![6f0ea602cec91965b539fd9a8d2f4640.png][]

10.2、在表格代码下写下分页器代码

![0f22b1f0e4c478ada0622ff4afb05eb7.png][]

@size-change就是改变一页数据的大小

@current-change就是改变第几页，:page-size=”\[1,5,10,20\]”就是一页有多少条数据的选择。

![83908c0cce41fe20b9a0fef01f226ee0.png][]

实现的效果就是如下图：

![41e0ad34864a11f19800808184e59220.png][]

这样就实现了使用post请求拿到数据渲染到el-table上面，并且实现了分页。

**三、实验结果与讨论**

代码清单 1

<table> 
 <tbody> 
 <tr> 
 <td>&lt;template&gt; &nbsp;&lt;div class="search"&gt; &nbsp; &nbsp;&lt;input vaule="请输入关键词" v-model="search" @keyup.enter="getSearchPage"&gt;&lt;/input&gt; &nbsp; &nbsp;&lt;input type="button" @click="getSearchPage"&gt;&lt;/input&gt; &nbsp;&lt;/div&gt; &nbsp;&lt;el-table &nbsp; &nbsp; &nbsp;:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" &nbsp;&gt; &nbsp; &nbsp;&lt;el-table-column &nbsp; &nbsp; &nbsp; &nbsp;prop="id" &nbsp; &nbsp;&gt; &nbsp; &nbsp;&lt;/el-table-column&gt; &nbsp; &nbsp;&lt;el-table-column &nbsp; &nbsp; &nbsp; &nbsp;prop="name" &nbsp; &nbsp;&gt; &nbsp; &nbsp;&lt;/el-table-column&gt; &nbsp;&lt;/el-table&gt; &nbsp;&lt;div class="block" style="margin-top:15px;"&gt; &nbsp; &nbsp;&lt;el-pagination &nbsp; &nbsp; &nbsp; &nbsp;align='center' &nbsp; &nbsp; &nbsp; &nbsp;@size-change="changePageSize" &nbsp; &nbsp; &nbsp; &nbsp;@current-change="changePageCurrent" &nbsp; &nbsp; &nbsp; &nbsp;:current-page="currentPage" &nbsp; &nbsp; &nbsp; &nbsp;:page-sizes="[1,5,10,20]" &nbsp; &nbsp; &nbsp; &nbsp;:page-size="pageSize" &nbsp; &nbsp; &nbsp; &nbsp;layout="total, sizes, prev, pager, next, jumper" &nbsp; &nbsp; &nbsp; &nbsp;:total="tableData.length"&gt; &nbsp; &nbsp;&lt;/el-pagination&gt; &nbsp;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; import axios from "axios"; export default { &nbsp;data(){ &nbsp; &nbsp;return{ &nbsp; &nbsp; &nbsp;//分页 &nbsp; &nbsp; &nbsp;currentPage: 1, // 当前页码 &nbsp; &nbsp; &nbsp;total: 20, // 总条数 &nbsp; &nbsp; &nbsp;pageSize: 5, &nbsp; &nbsp; &nbsp;// &nbsp; &nbsp; &nbsp;tableData:[] &nbsp; &nbsp;} &nbsp;}, &nbsp;created() { &nbsp; &nbsp;this.getPageData() &nbsp;}, &nbsp;methods:{ &nbsp; &nbsp;getPageData(){ &nbsp; &nbsp; &nbsp;axios.post("",{},{ &nbsp; &nbsp; &nbsp; &nbsp;headers:{ &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp;}).then(response=&gt;{ &nbsp; &nbsp; &nbsp; &nbsp;this.tableData = response.data.data.records &nbsp; &nbsp; &nbsp;}) &nbsp; &nbsp;}, &nbsp; &nbsp;getSearchPage() { &nbsp; &nbsp; &nbsp;axios.post("",{name:`${this.search}`},{ &nbsp; &nbsp; &nbsp; &nbsp;headers:{ &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp;}).then(response=&gt;{ &nbsp; &nbsp; &nbsp; &nbsp;this.tableData=response.data.data.records &nbsp; &nbsp; &nbsp;}) &nbsp; &nbsp;}, &nbsp; &nbsp;changePageSize(pageSize) { &nbsp; &nbsp; &nbsp;this.currentPage = 1; &nbsp; &nbsp; &nbsp;this.pageSize = pageSize; &nbsp; &nbsp;}, &nbsp; &nbsp;changePageCurrent(pageNum) { &nbsp; &nbsp; &nbsp;this.currentPage = pageNum; &nbsp; &nbsp;}, &nbsp;} } &lt;/script&gt; &lt;style scoped&gt; &lt;/style&gt;</td> 
 </tr> 
 </tbody> 
</table>

**四、结语**

本片文章并没有给出api地址，提供一个思路，所以上述代码只是为了提供一个思路，在post请求访问api的时候，需要注意的是一定要写入参数，如\{id,name\}，没有参数，post请求发送失败。搜索的实现也是，只不过搜索的实现是通过获取到input输入框里面的关键词，赋值给post请求传入参数里面的api的变量，这样post请求发送之后就只会拿到和关键词相关的数据。

[5a3a04ed497badec3b5eba96d7be05f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/4cc7388ff4fd4ed88775fb1b92c86ddc.png
[50c1ba2f85adf0429b43535d5a539d1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/7e2371f3537f4b668297342068f70b23.png
[a3d2d3642bb95d23aa7f557c3bd18114.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/02d2502034e3415d8b616b0287c16766.png
[3ab9bff8426926a29ab5ae8df44ebaa4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/a6c0235a5752407ca9a1daae973e924f.png
[bfe0475d021fff1cb22b731f63575e87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/5e0320e7e10c4d61a1c83aadc4f70516.png
[7ab6ae7d333185310be914038f6ee60d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/80edc6d459564940a0992d395d55bbf8.png
[60cc6942834b435c7a3b123894523261.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/996ef9353aa54a85bf6dfe0cca672ee5.png
[368d29fca0acfd779576d8548ebc7166.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/9bc0915a961742989a6ae6c8efd3de3a.png
[8e6b612de507f0f86fd358ab3b7a8f0f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/14a82e079f954e508afc7347c94b4a32.png
[1485cefc31b41d3f633f78f8469af960.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/cbcb2363098b446db7247e6992f46cee.png
[cfd323827c2bebde69f1373ccfa10dfe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/98b765124ba748799931d70f29fb8063.png
[0197e7e123ab94c67beb4f8f37c58b73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/05ba3a754be647a4b6c083a47cb9a4a0.png
[c7805917eb1abe4a6ff010598662fbde.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/3e75234179784889a3176f8df12106bf.png
[125a1f58794e73a2a152229349dc1171.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/d8a2bad1e1c14536872621cf63f145c1.png
[9053b2d8852e9f1baccd9dd04124c236.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/5e010050572642999eca18408719c151.png
[bd1da0bee98d54f3f163050826069331.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/a0278fa261c349b48112763a473c463d.png
[ab9ceec28ac5c4d2e9f280b809ed0244.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/a64e8eaccdee4fd8be4aab6b9bc9f0b4.png
[2ff6be76c5b009e3f777cda077139c30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/627bcc97722c4ec9b64ee6d6578c4105.png
[c073f3ed31298b32faaf776110c11bcc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/5289b0fdd9e049b9aaed0c545528990e.png
[6797194bce445d855bc38a39aa68578f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/1a6d7876eba1415eb1f0831390fd8628.png
[ff1deec1ab31dde1ca101acd0cc4c8d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/546eec6f731842e4b834b45418d3bb79.png
[6f0ea602cec91965b539fd9a8d2f4640.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/a4883a02945d4332a879e4292f4ced21.png
[0f22b1f0e4c478ada0622ff4afb05eb7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/a6f09896947e4451bf19d1d5ee2f2fed.png
[83908c0cce41fe20b9a0fef01f226ee0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/5ed6316da3724d81af506a894740006f.png
[41e0ad34864a11f19800808184e59220.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/eed43da0d4b44b429337053205b96344.png