怎么使用elementUI組件實現表格的分頁及搜索功能

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

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

效果展示：

 主要功能：

① 完成列表與分頁組件的聯動，可以通過分頁來實現列表數據翻頁。

② 通過在搜索欄輸入關鍵詞，在列表中展示出與關鍵詞有關數據。

基礎設置：

一、el-input組件的設置

主要代碼：

<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組件的設置

主要代碼：

<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="所屬地區">
      </el-table-column>
<el-table-column
        prop="cla"
        label="風險預警場景">
      </el-table-column>
<el-table-column
        prop="level"
        label="風險預警等級"
		width="120">
      </el-table-column>
<el-table-column
        prop="time"
        label="風險預警時間"
		width="120">
      </el-table-column>
<el-table-column
        prop="result"
        label="風險預警因素"
		width="280">
      </el-table-column>
    </el-table>

在data中聲明tableData的數據：

 tableData: [{
            name: '張李某',
            idcount: '123456789012345678',
            address: '上海市普陀區金沙江路 1518 弄',
			cla:'重點信訪風險人員',
			level:'高',
			time:'2022-05-27',
			result:'維穩人員，近3年矛盾糾紛頻發…'
          }, {
            name: '張某某',
            idcount: '123456789012345678',
            address: '上海市普陀區金沙江路 1518 弄',
			cla:'重點信訪風險人員',
			level:'高',
			time:'2022-05-27',
			result:'維穩人員，近3年矛盾糾紛頻發…'
          },
					   {
            name: '張某某',
            idcount: '123456789012345678',
            address: '上海市普陀區金沙江路 1518 弄',
			cla:'重點信訪風險人員',
			level:'高',
			time:'2022-05-27',
			result:'維穩人員，近3年矛盾糾紛頻發…'
          },
					   {
            name: '張某某',
            idcount: '123456789012345678',
            address: '上海市普陀區金沙江路 1518 弄',
			cla:'重點信訪風險人員',
			level:'高',
			time:'2022-05-27',
			result:'維穩人員，近3年矛盾糾紛頻發…'
          },
					   {
            name: '張某某',
            idcount: '123456789012345678',
            address: '上海市普陀區金沙江路 1518 弄',
			cla:'重點信訪風險人員',
			level:'高',
			time:'2022-05-27',
			result:'維穩人員，近3年矛盾糾紛頻發…'
          },.............

三、el-pagination組件的設置

主要代碼：

<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為改變每個頁面展示的數據量的方法。

@current-change為改變當前頁的方法。

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

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

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

相關功能實現：

一、el-pagination與el-table聯動實現列表分頁

兩者聯動較為簡單，只需要將列表的整體數據根據currentPage和pageSize的值進行分割：

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

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

二、el-input與el-table聯動實現列表搜索

首先，需要對el-input中輸入的值進行v-model雙向綁定，這樣可以得到輸入的值，并在按鈕中建立一個點擊事件，因為我們要實現的功能是點擊搜索按鈕進行搜索，所以防止在input框中輸入值后自動完成搜索，所以需要設立點擊事件，以及將inputContent的值轉給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跟隨搜索后的數據總數改變，所以我們要返回兩個值，用數組的形式代替，tables[0]為返回的數據值，tables[1]為返回數據的長度也就是數量。

tables我們首先將searchContent的值傳遞給search，然后判斷，當搜索欄輸入為空時，返回的就是tableData的原始數據；當搜索欄不為空時，首先用filter過濾tableData內的每一個對象數組，然后在通過keys拿到每一列數據的key值，再通過some()和indexof()判斷每一列數據中的每一個key值所對應的值中有沒有與search相同的元素，并返回該元素所在的數據組，這樣就得到所有存在該關鍵字的數據。

computed:{
tables() {
      const search = this.searchContent;
 //當將input框清空時，使列表自動展示搜索前的完整數據，并返回至首頁，防止疊加搜索
	  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組件實現表格的分頁及搜索功能”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。