2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

elementui查詢數(shù)據(jù)時(shí)，怎樣設(shè)置過濾方法？

官網(wǎng)：elementui的tree組件

數(shù)據(jù)過多怎樣加載？（若不使用搜索功能）官網(wǎng)：tree懶加載

數(shù)據(jù)過多時(shí)怎樣加載？（若使用搜索功能）提供解決思路

節(jié)點(diǎn)過濾方法

官網(wǎng)中節(jié)點(diǎn)過濾只加載當(dāng)前節(jié)點(diǎn)和其父節(jié)點(diǎn)，不會加載對應(yīng)的子節(jié)點(diǎn)

• 我把官網(wǎng)中例子稍微改一下，因?yàn)閿?shù)據(jù)過多，所以搜索功能在點(diǎn)擊時(shí)再實(shí)現(xiàn) <el-inputplaceholder="輸入關(guān)鍵字進(jìn)行過濾"v-model="filterText"> </el-input> <el-button @click="search" type="primary">搜索</el-button><el-treeclass="filter-tree":data="data2":props="defaultProps"default-expand-all:filter-node-method="filterNode"ref="tree2"> </el-tree><script>export default {methods: {data() {return {filterText: '',data2: [{id: 1,label: '一級 1',children: [{id: 4,label: '二級 1-1',children: [{id: 9,label: '三級 1-1-1'}, {id: 10,label: '三級 1-1-2'}]}]}, {id: 2,label: '一級 2',children: [{id: 5,label: '二級 2-1'}, {id: 6,label: '二級 2-2'}]}, {id: 3,label: '一級 3',children: [{id: 7,label: '二級 3-1'}, {id: 8,label: '二級 3-2'}]}],defaultProps: {children: 'children',label: 'label'}};},search() {this.$refs.tree2.filter(this.filterText);},filterNode(value, data) {if (!value) return truereturn data.label.indexOf(value) !== -1;}},}; </script>

  ?

• 此時(shí)可以實(shí)現(xiàn)，當(dāng)點(diǎn)擊搜索時(shí)，只會搜索到當(dāng)前節(jié)點(diǎn)包含該搜索字段filterText的樹渲染
• 而我們一般實(shí)際業(yè)務(wù)中，需要搜索到其下所有的子節(jié)點(diǎn)
• 實(shí)現(xiàn)方法如下（修改filterNode方法即可，注意注意：filterNode方法有三個參數(shù)） filterNode(value,data,node) {//如果共有三級菜單if (!value) return truelet if_one = data.label.indexOf(value) !== -1let if_two = node.parent && node.parent.data && node.parent.data.label && (node.parent.data.label.indexOf(value) !== -1)let if_three = node.parent && node.parent.parent && node.parent.parent.data && node.parent.parent.data.label && (node.parent.parent.data.label.indexOf(value) !== -1)let result_one = falselet result_two = falselet result_three = falseif(node.level === 1) {result_one = if_one}else if(node.level === 2) {result_two = if_one || if_two}else if(node.level === 3) {result_three = if_one || if_two || if_three}return result_one || result_two || result_three }

  ?

• ok 了，趕緊去試試吧，記得點(diǎn)贊哈！

轉(zhuǎn)載于:https://my.oschina.net/kaiyuanlong/blog/3026199

總結(jié)

以上是生活随笔為你收集整理的elementUI的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。