如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能
主要的UI組件：el-input、el-table、el-pagination
效果展示：
主要功能：
① 完成列表與分頁組件的聯(lián)動，可以通過分頁來實現(xiàn)列表數(shù)據(jù)翻頁。
② 通過在搜索欄輸入關(guān)鍵詞，在列表中展示出與關(guān)鍵詞有關(guān)數(shù)據(jù)。
基礎(chǔ)設(shè)置：
一、el-input組件的設(shè)置
主要代碼：
<el-input v-model="inputContent" class="searchinput" placeholder="請輸入姓名或身份證進行查詢" prefix-icon="el-icon-search" >
<el-button slot="append" class="searchbtn" @click="searchput">搜索</el-button>
</el-input>二、el-table組件的設(shè)置
主要代碼：
<el-table
:data="tables[0].slice((currentPage - 1) * pageSize, currentPage*pageSize)"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="150">
</el-table-column>
<el-table-column
prop="idcount"
label="身份證號"
width="300">
</el-table-column>
<el-table-column
prop="address"
label="所屬地區(qū)">
</el-table-column>
<el-table-column
prop="cla"
label="風(fēng)險預(yù)警場景">
</el-table-column>
<el-table-column
prop="level"
label="風(fēng)險預(yù)警等級"
width="120">
</el-table-column>
<el-table-column
prop="time"
label="風(fēng)險預(yù)警時間"
width="120">
</el-table-column>
<el-table-column
prop="result"
label="風(fēng)險預(yù)警因素"
width="280">
</el-table-column>
</el-table>在data中聲明tableData的數(shù)據(jù)：
tableData: [{
name: '張李某',
idcount: '123456789012345678',
address: '上海市普陀區(qū)金沙江路 1518 弄',
cla:'重點信訪風(fēng)險人員',
level:'高',
time:'2022-05-27',
result:'維穩(wěn)人員，近3年矛盾糾紛頻發(fā)…'
}, {
name: '張某某',
idcount: '123456789012345678',
address: '上海市普陀區(qū)金沙江路 1518 弄',
cla:'重點信訪風(fēng)險人員',
level:'高',
time:'2022-05-27',
result:'維穩(wěn)人員，近3年矛盾糾紛頻發(fā)…'
},
{
name: '張某某',
idcount: '123456789012345678',
address: '上海市普陀區(qū)金沙江路 1518 弄',
cla:'重點信訪風(fēng)險人員',
level:'高',
time:'2022-05-27',
result:'維穩(wěn)人員，近3年矛盾糾紛頻發(fā)…'
},
{
name: '張某某',
idcount: '123456789012345678',
address: '上海市普陀區(qū)金沙江路 1518 弄',
cla:'重點信訪風(fēng)險人員',
level:'高',
time:'2022-05-27',
result:'維穩(wěn)人員，近3年矛盾糾紛頻發(fā)…'
},
{
name: '張某某',
idcount: '123456789012345678',
address: '上海市普陀區(qū)金沙江路 1518 弄',
cla:'重點信訪風(fēng)險人員',
level:'高',
time:'2022-05-27',
result:'維穩(wěn)人員，近3年矛盾糾紛頻發(fā)…'
},.............三、el-pagination組件的設(shè)置
主要代碼：
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" background="true" layout="prev, pager, next" :total="count" class="fenye"> </el-pagination>
@size-change為改變每個頁面展示的數(shù)據(jù)量的方法。
@current-change為改變當前頁的方法。
在data中聲明變量currentPage，pageSize，分別為默認頁，以及默認尺寸。
currentPage: 1,
pageSize: 12
-------------------------------
methods: {
handleSizeChange(val){
this.pageSize=val;
},
handleCurrentChange(val){
this.currentPage=val;
}total為整個table一共擁有的數(shù)據(jù)量，該數(shù)據(jù)量的值會改變分頁組件頁碼的個數(shù)。
相關(guān)功能實現(xiàn)：
一、el-pagination與el-table聯(lián)動實現(xiàn)列表分頁
兩者聯(lián)動較為簡單，只需要將列表的整體數(shù)據(jù)根據(jù)currentPage和pageSize的值進行分割：
<el-table
:data="tables[0].slice((currentPage - 1) * pageSize, currentPage*pageSize)"
style="width: 100%">tables[0]為處理好的整體列表數(shù)據(jù)（tables與tableData的關(guān)系與搜索功能有關(guān)，下面會介紹）。
二、el-input與el-table聯(lián)動實現(xiàn)列表搜索
首先，需要對el-input中輸入的值進行v-model雙向綁定，這樣可以得到輸入的值，并在按鈕中建立一個點擊事件，因為我們要實現(xiàn)的功能是點擊搜索按鈕進行搜索，所以防止在input框中輸入值后自動完成搜索，所以需要設(shè)立點擊事件，以及將inputContent的值轉(zhuǎn)給searchContent。
<el-input v-model="inputContent" class="searchinput" placeholder="請輸入姓名或身份證進行查詢" prefix-icon="el-icon-search" >
<el-button slot="append" class="searchbtn" @click="searchput">搜索</el-button>
</el-input>
---------------
searchput(){
this.searchContent=this.inputContent
console.log(this.searchContent)
}
---------------
searchContent:'',
inputContent:'',定義一個computed值tables替代tableData，首先，為了使el-pagination的total跟隨搜索后的數(shù)據(jù)總數(shù)改變，所以我們要返回兩個值，用數(shù)組的形式代替，tables[0]為返回的數(shù)據(jù)值，tables[1]為返回數(shù)據(jù)的長度也就是數(shù)量。
tables我們首先將searchContent的值傳遞給search，然后判斷，當搜索欄輸入為空時，返回的就是tableData的原始數(shù)據(jù)；當搜索欄不為空時，首先用filter過濾tableData內(nèi)的每一個對象數(shù)組，然后在通過keys拿到每一列數(shù)據(jù)的key值，再通過some()和indexof()判斷每一列數(shù)據(jù)中的每一個key值所對應(yīng)的值中有沒有與search相同的元素，并返回該元素所在的數(shù)據(jù)組，這樣就得到所有存在該關(guān)鍵字的數(shù)據(jù)。
computed:{
tables() {
const search = this.searchContent;
//當將input框清空時，使列表自動展示搜索前的完整數(shù)據(jù)，并返回至首頁，防止疊加搜索
if(this.inputContent==''){
this.searchContent=''
this.currentPage=1
return [this.tableData,this.count=this.tableData.length];
}
if (search!=='') {
return [this.tableData.filter((dataNews) => {
return Object.keys(dataNews).some((key) => {
return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
});
}),
this.count = this.tableData.filter((dataNews) => {
return Object.keys(dataNews).some((key) => {
return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
});
}).length];
}
return [this.tableData,this.count=this.tableData.length];
}
}三、效果展示
總結(jié)
到此這篇關(guān)于如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能的文章就介紹到這了,更多相關(guān)elementUI組件實現(xiàn)表格分頁及搜索內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了基于vue和websocket的多人在線聊天室,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Vue雙向數(shù)據(jù)綁定的原理，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了vue-element Tree樹形控件填坑路，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue引入路徑正確但一直報錯問題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報錯:Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
因為vue的響應(yīng)式是通過 Object.defineProperty 來實現(xiàn)的，但是數(shù)組的length屬性是不能添加getter和setter，所有無法通過觀察length來判斷。這篇文章主要介紹了為什么Vue不能觀察到數(shù)組length的變化,需要的朋友可以參考下2018-06-06
vue中設(shè)置height:100%無效的問題及解決方法
這篇文章主要介紹了vue中設(shè)置height 100%無效的問題及解決方法，需要的朋友可以參考下2018-07-07
vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別
這篇文章主要介紹了對vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別,需要的朋友可以參考下2022-05-05
本篇文章主要介紹了vue-router：嵌套路由的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本文給大家分享如何使用vue3實現(xiàn)文章目錄功能，特色功能主要是自動高亮選中當前正在閱讀的章節(jié)，自動展開當前正在閱讀的章節(jié)的子標題，并隱藏其他章節(jié)的子標題，代碼簡單易懂，感興趣的朋友跟隨小編一起看看吧2022-03-03
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12