2019獨角獸企業重金招聘Python工程師標準>>>

elementui查詢數據時，怎樣設置過濾方法？

官網：elementui的tree組件

數據過多怎樣加載？（若不使用搜索功能）官網：tree懶加載

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

節點過濾方法

官網中節點過濾只加載當前節點和其父節點，不會加載對應的子節點

• 我把官網中例子稍微改一下，因為數據過多，所以搜索功能在點擊時再實現 <el-inputplaceholder="輸入關鍵字進行過濾"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>

  ?

• 此時可以實現，當點擊搜索時，只會搜索到當前節點包含該搜索字段filterText的樹渲染
• 而我們一般實際業務中，需要搜索到其下所有的子節點
• 實現方法如下（修改filterNode方法即可，注意注意：filterNode方法有三個參數） 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 了，趕緊去試試吧，記得點贊哈！

轉載于:https://my.oschina.net/kaiyuanlong/blog/3026199

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。