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