欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能

 更新時間:2023年03月28日 14:34:38   作者:前端卡布達  
最近在使用element-ui的表格組件時,遇到了搜索框功能的實現(xiàn)問題,這篇文章主要給大家介紹了關(guān)于如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能的相關(guā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的多人在線聊天室

    基于vue和websocket的多人在線聊天室

    這篇文章主要介紹了基于vue和websocket的多人在線聊天室,需要的朋友可以參考下
    2020-02-02
  • Vue雙向數(shù)據(jù)綁定(MVVM)的原理

    Vue雙向數(shù)據(jù)綁定(MVVM)的原理

    這篇文章主要介紹了Vue雙向數(shù)據(jù)綁定的原理,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下
    2020-10-10
  • 詳解vue-element Tree樹形控件填坑路

    詳解vue-element Tree樹形控件填坑路

    這篇文章主要介紹了vue-element Tree樹形控件填坑路,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • Vue引入路徑正確但一直報錯問題:Already included file name ‘××ב differs from file name ‘××ב only in casing.

    Vue引入路徑正確但一直報錯問題:Already included file name&n

    這篇文章主要介紹了Vue引入路徑正確但一直報錯:Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • Vue不能觀察到數(shù)組length的變化

    Vue不能觀察到數(shù)組length的變化

    因為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%無效的問題及解決方法

    這篇文章主要介紹了vue中設(shè)置height 100%無效的問題及解決方法,需要的朋友可以參考下
    2018-07-07
  • vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別

    vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別

    這篇文章主要介紹了對vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別,需要的朋友可以參考下
    2022-05-05
  • vue-router:嵌套路由的使用方法

    vue-router:嵌套路由的使用方法

    本篇文章主要介紹了vue-router:嵌套路由的使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • 使用?Vue3?實現(xiàn)文章目錄功能

    使用?Vue3?實現(xiàn)文章目錄功能

    本文給大家分享如何使用vue3實現(xiàn)文章目錄功能,特色功能主要是自動高亮選中當前正在閱讀的章節(jié),自動展開當前正在閱讀的章節(jié)的子標題,并隱藏其他章節(jié)的子標題,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧
    2022-03-03
  • vue項目實現(xiàn)圖片上傳功能

    vue項目實現(xiàn)圖片上傳功能

    這篇文章主要為大家詳細介紹了vue項目實現(xiàn)圖片上傳功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-12-12

最新評論