您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)element ui table如何增加篩選,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
網(wǎng)上大部分都可以增加篩選功能,但沒有找到下列這種情況。
若表頭數(shù)據(jù)較多,而表頭是自己通過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">
列表頭是通過v-for循環(huán)遍歷出來的數(shù)據(jù)
如何添加規(guī)則內(nèi)容
首先,element提供了filters,filter-method兩個屬性,一個是寫規(guī)則的內(nèi)容,一個是寫的方法。
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這個key值。
filter里面的內(nèi)容要按照element ui 上面的格式塞進去
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
所以只能用方法來找到相應(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ù)拿到的。所以要對規(guī)則的內(nèi)容進行處理。
this.tableData.forEach((item) => { filterList.push({ text: item.xxx, value: item.yyy }) })
這樣操作肯定會有重復(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 },
關(guān)于“element ui table如何增加篩選”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。