怎么使用elementUI組件實(shí)現(xiàn)表格的分頁及搜索功能

今天小編給大家分享一下怎么使用elementUI組件實(shí)現(xiàn)表格的分頁及搜索功能的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

主要的UI組件：el-input、el-table、el-pagination

效果展示：

 主要功能：

① 完成列表與分頁組件的聯(lián)動，可以通過分頁來實(shí)現(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="請輸入姓名或身份證進(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)"
      >
      <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)險(xiǎn)預(yù)警場景">
      </el-table-column>
<el-table-column
        prop="level"
        label="風(fēng)險(xiǎn)預(yù)警等級"
		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為改變每個頁面展示的數(shù)據(jù)量的方法。

@current-change為改變當(dāng)前頁的方法。

在data中聲明變量currentPage，pageSize，分別為默認(rèn)頁，以及默認(rèn)尺寸。

currentPage: 1,
pageSize: 12
------------------------------- 
methods: {
        handleSizeChange(val){
		this.pageSize=val;
		},
		  handleCurrentChange(val){
		this.currentPage=val;
		}

total為整個table一共擁有的數(shù)據(jù)量，該數(shù)據(jù)量的值會改變分頁組件頁碼的個數(shù)。

相關(guān)功能實(shí)現(xiàn)：

一、el-pagination與el-table聯(lián)動實(shí)現(xiàn)列表分頁

兩者聯(lián)動較為簡單，只需要將列表的整體數(shù)據(jù)根據(jù)currentPage和pageSize的值進(jìn)行分割：

<el-table
      :data="tables[0].slice((currentPage - 1) * pageSize, currentPage*pageSize)"
      >

tables[0]為處理好的整體列表數(shù)據(jù)（tables與tableData的關(guān)系與搜索功能有關(guān)，下面會介紹）。

二、el-input與el-table聯(lián)動實(shí)現(xiàn)列表搜索

首先，需要對el-input中輸入的值進(jìn)行v-model雙向綁定，這樣可以得到輸入的值，并在按鈕中建立一個點(diǎn)擊事件，因?yàn)槲覀円獙?shí)現(xiàn)的功能是點(diǎn)擊搜索按鈕進(jìn)行搜索，所以防止在input框中輸入值后自動完成搜索，所以需要設(shè)立點(diǎn)擊事件，以及將inputContent的值轉(zhuǎn)給searchContent。

<el-input  v-model="inputContent" class="searchinput" placeholder="請輸入姓名或身份證進(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:'',

 定義一個computed值tables替代tableData，首先，為了使el-pagination的total跟隨搜索后的數(shù)據(jù)總數(shù)改變，所以我們要返回兩個值，用數(shù)組的形式代替，tables[0]為返回的數(shù)據(jù)值，tables[1]為返回?cái)?shù)據(jù)的長度也就是數(shù)量。

tables我們首先將searchContent的值傳遞給search，然后判斷，當(dāng)搜索欄輸入為空時(shí)，返回的就是tableData的原始數(shù)據(jù)；當(dāng)搜索欄不為空時(shí)，首先用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;
 //當(dāng)將input框清空時(shí)，使列表自動展示搜索前的完整數(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];
	}
}

以上就是“怎么使用elementUI組件實(shí)現(xiàn)表格的分頁及搜索功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。