|
一、問題 使用post方法訪問api，拿到數(shù)據(jù)之后，與el-teble表格進(jìn)行綁定，并在搜索框中通過關(guān)鍵詞來進(jìn)行表格數(shù)據(jù)的搜索。 二、方法 本篇文章使用的是axios發(fā)送post實現(xiàn)的，實現(xiàn)步驟如下： 首先安裝axios，安裝指令： 
安裝之后，在main.js文件里面引入axios： 
先寫一個搜索框和搜索按鈕出來
使用el-table表格，這是element-ui里面的表格，所以要先引入elemeng-ui，在main.js里面引入，引入之前進(jìn)行安裝，在控制端中安裝指令是： 
在main.js文件引入，代碼如下：
5、然后就可以使用el-table標(biāo)簽了
:data=”tableData”，意思是表格的數(shù)據(jù)來源于tableData，所以現(xiàn)在要在script里面給定一個tableData列表
表格中每一列的數(shù)據(jù)是通過prop來進(jìn)行綁定的，因為要使用到api的數(shù)據(jù)，所以這里prop的命名要與api相對應(yīng)的數(shù)據(jù)命名一樣，這里寫了兩列。分別是id和name
6、寫方法函數(shù)進(jìn)行post請求拿到api里面的數(shù)據(jù)
methods里面就用來放方法，created是vue里面的一個生命周期鉤子函數(shù)，vue實例被生成之后就會調(diào)用這個函數(shù)，換言之，頁面初始化的時候調(diào)用這個函6.1、寫入方法getPageData
6.2、使用axios發(fā)送post請求
里面有三個需要注意的，url就是api的地址，data通過傳入的參數(shù)來進(jìn)行發(fā)送post請求，config中headers就是請求的配置，拿到數(shù)據(jù)之后用response儲存起來，這樣response就是我們拿到的api里的數(shù)據(jù)了，拿到之后我們要把a(bǔ)pi里拿到的數(shù)據(jù)給tableData
api里面列表數(shù)據(jù)是records，所以在給tableData的時候是把這個列表賦值給它
6.3、在created里面，是頁面創(chuàng)建的時候調(diào)用該方法
7、將api的數(shù)據(jù)渲染到頁面el-table里面
prop的命名要和api里面，你要渲染到頁面上的數(shù)據(jù)命名一樣，通過prop綁定之后，數(shù)據(jù)會自動識別，進(jìn)行渲染。
8、實現(xiàn)搜索
8.1、在input里面綁定回車事件，按鈕綁定點擊事件，綁定回車事件時使用@keyup.enter=”查詢方法名”，綁定點擊事件使用@click,下圖getSearchPage為搜索的方法，使用v-model獲取input里面輸入的值，賦值給search參數(shù)。
9、搜索方法實現(xiàn) 定義一個search來接收input里面輸入的值
然后getSearchPage也是通過post請求拿到數(shù)據(jù)，但是這次是通過name來拿到數(shù)據(jù)
search就是獲取的輸入框里的關(guān)鍵詞
如果說我們輸入123，那這里name就為name:”123”,這樣拿到的數(shù)據(jù)就是關(guān)于123的幾條數(shù)據(jù)。這樣搜索功能就實現(xiàn)了。
10、實現(xiàn)el-table分頁 10.1、需要定義的變量
在el-table里面添加分頁代碼
10.2、在表格代碼下寫下分頁器代碼
@size-change就是改變一頁數(shù)據(jù)的大小
@current-change就是改變第幾頁，:page-size=”[1,5,10,20]”就是一頁有多少條數(shù)據(jù)的選擇。
實現(xiàn)的效果就是如下圖：
這樣就實現(xiàn)了使用post請求拿到數(shù)據(jù)渲染到el-table上面，并且實現(xiàn)了分頁。
三、實驗結(jié)果與討論 代碼清單 1 <template>
<div class="search">
<input vaule="請輸入關(guān)鍵詞" 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, // 當(dāng)前頁碼
total: 20, // 總條數(shù)
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> |
四、結(jié)語 本片文章并沒有給出api地址，提供一個思路，所以上述代碼只是為了提供一個思路，在post請求訪問api的時候，需要注意的是一定要寫入?yún)?shù)，如{id,name}，沒有參數(shù)，post請求發(fā)送失敗。搜索的實現(xiàn)也是，只不過搜索的實現(xiàn)是通過獲取到input輸入框里面的關(guān)鍵詞，賦值給post請求傳入?yún)?shù)里面的api的變量，這樣post請求發(fā)送之后就只會拿到和關(guān)鍵詞相關(guān)的數(shù)據(jù)。
|
