element ui table 增加篩選的方法示例
網(wǎng)上大部分都可以增加篩選功能，但沒(méi)有找到下列這種情況。
若表頭數(shù)據(jù)較多，而表頭是自己通過(guò)v-for循環(huán)產(chǎn)生，這種情況怎么給虛擬dom添加篩選規(guī)則。
<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">
列表頭是通過(guò)v-for循環(huán)遍歷出來(lái)的數(shù)據(jù)
如何添加規(guī)則內(nèi)容
首先，element提供了filters，filter-method兩個(gè)屬性，一個(gè)是寫規(guī)則的內(nèi)容，一個(gè)是寫的方法。
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: []}
]
只需要在要添加規(guī)則的上面加上filter這個(gè)key值。
filter里面的內(nèi)容要按照element ui 上面的格式塞進(jìn)去
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
所以只能用方法來(lái)找到相應(yīng)的id然后再處理。
let filterList = this.tableHead.filter(i => i.id === '1')[0].filter
規(guī)則的內(nèi)容是和列表內(nèi)容有關(guān)系，而一般情況下列表的內(nèi)容也是從后端數(shù)據(jù)拿到的。所以要對(duì)規(guī)則的內(nèi)容進(jìn)行處理。
this.tableData.forEach((item) => {
filterList.push({
text: item.xxx, value: item.yyy
})
})
這樣操作肯定會(huì)有重復(fù)的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
},
得到最終的規(guī)則內(nèi)容：
filterList = this.uniqArrObject(filterList)
規(guī)則方法
filterHandler (value, row, column) {
const property = column['property']
return row[property] === value || row[property].value === value
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+vite使用History路由模式打包部署項(xiàng)目的步驟及注意事項(xiàng)
這篇文章主要介紹了vue3+vite使用History路由模式打包部署項(xiàng)目的步驟及注意事項(xiàng),配置過(guò)程包括在Vue項(xiàng)目中設(shè)置路由模式、調(diào)整打包配置以及Nginx服務(wù)器的配置,正確的部署配置能夠確保應(yīng)用順利運(yùn)行,提升用戶體驗(yàn),需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue項(xiàng)目點(diǎn)擊元素后如何改變樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vues中使用JavaScript實(shí)現(xiàn)路由跳轉(zhuǎn)的步驟詳解
在Vue應(yīng)用中,利用Vue?Router進(jìn)行頁(yè)面間的導(dǎo)航是一個(gè)常見需求,本篇博客將通過(guò)示例代碼詳細(xì)介紹如何在Vue組件中使用JavaScript實(shí)現(xiàn)路由跳轉(zhuǎn),需要的朋友可以參考下2024-05-05
Vue進(jìn)階之CodeMirror的應(yīng)用小結(jié)
CodeMirror支持在線編輯代碼，風(fēng)格包括js, java, php, c++等等100多種語(yǔ)言，下面這篇文章主要來(lái)和大家講講CodeMirror的應(yīng)用，感興趣的可以了解一下2023-06-06
Vuex Store 數(shù)據(jù)在頁(yè)面刷新后丟失的解決方法
當(dāng)我們使用 Vue.js 和 Vuex 進(jìn)行狀態(tài)管理時(shí),一個(gè)常見的問(wèn)題是頁(yè)面刷新會(huì)導(dǎo)致 Vuex store 中的數(shù)據(jù)丟失,本文將詳細(xì)介紹解決 Vuex Store 數(shù)據(jù)在頁(yè)面刷新后丟失的方法,感興趣的朋友一起看看吧2024-08-08
vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解
今天小編就為大家分享一篇vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家介紹了Tree-Shaking?機(jī)制的快速掌握教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)
這篇文章主要介紹了vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue debug 二種方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Vue單頁(yè)面應(yīng)用做預(yù)渲染的方法實(shí)例
vue是一個(gè)單頁(yè)面的應(yīng)用,這導(dǎo)致一些爬蟲和百度無(wú)法搜索到,如果你想針對(duì)你應(yīng)用的其中某些頁(yè)面進(jìn)行SEO優(yōu)化,讓他們可以被爬蟲和百度搜索到,你可以進(jìn)行預(yù)渲染操作,下面這篇文章主要給大家介紹了關(guān)于Vue單頁(yè)面應(yīng)用做預(yù)渲染的相關(guān)資料,需要的朋友可以參考下2021-10-10