如何使用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引入路徑正確但一直報錯問題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報錯:Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12vue中設(shè)置height:100%無效的問題及解決方法
這篇文章主要介紹了vue中設(shè)置height 100%無效的問題及解決方法,需要的朋友可以參考下2018-07-07vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別
這篇文章主要介紹了對vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別,需要的朋友可以參考下2022-05-05