這篇文章將為大家詳細講解有關element ui table如何增加篩選，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創新互聯公司是一家集網站建設,大洼企業網站建設,大洼品牌網站建設,網站定制,大洼網站建設報價,網絡營銷,網絡優化,大洼網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

網上大部分都可以增加篩選功能，但沒有找到下列這種情況。

若表頭數據較多，而表頭是自己通過v-for循環產生，這種情況怎么給虛擬dom添加篩選規則。

<el-table-column v-for="item in tableHead" :key="item.id" :prop="item.id" :label="item.label" :filters="item.filter" :filter-method="item.filter && filterHandler">

列表頭是通過v-for循環遍歷出來的數據

如何添加規則內容

首先，element提供了filters，filter-method兩個屬性，一個是寫規則的內容，一個是寫的方法。

this.tableHead = [
   {id: '1', label: xxx},
   {id: '2', label: xxx, filter: []},
   {id: '3', label: xxx, filter: []},
   {id: '4', label: xxx},
   {id: '5', label: xxx},
   {id: '6', label: xxx, filter: []}
  ]

只需要在要添加規則的上面加上filter這個key值。

filter里面的內容要按照element ui 上面的格式塞進去

:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"

所以只能用方法來找到相應的id然后再處理。

let filterList = this.tableHead.filter(i => i.id === '1')[0].filter

規則的內容是和列表內容有關系，而一般情況下列表的內容也是從后端數據拿到的。所以要對規則的內容進行處理。

this.tableData.forEach((item) => {
   filterList.push({
   text: item.xxx, value: item.yyy
  })
 })

這樣操作肯定會有重復的text和value，所以需要去重。

去重方法：

uniqArrObject (arr) {
  let result = {}
  let finalResult = []
  for (let i = 0; i < arr.length; i++) {
   result[arr[i].text] = arr[i]
  }
  for (let key in result) {
   finalResult.push(result[key])
  }
  return finalResult
 },

得到最終的規則內容：

filterList = this.uniqArrObject(filterList)

規則方法

filterHandler (value, row, column) {
  const property = column['property']
  return row[property] === value || row[property].value === value
},

關于“element ui table如何增加篩選”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

網頁題目：elementuitable如何增加篩選-創新互聯
文章分享：http://m.newbst.com/article2/cepsic.html

成都網站建設公司_創新互聯，為您提供外貿建站、靜態網站、搜索引擎優化、響應式網站、網站設計公司、電子商務

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯