工作记录 --el-tree组合筛选条件（多重筛选条件）的实现

比眉伴天荒 2022-10-07 12:55 338阅读 0赞

#### 思路 ####

将筛选条件都塞到一个对象里，再用`this.$refs.tree.filter(obj)`时，传入一个对象

#### 具体实现 ####

data() {
        
    	return {
        
             level: "",
             type: "",
             keyName: "",
             filterObj: {
        
                 level: "",
                 type: "",
                 keyName: ""
             },
    	}
    },
    watch: {
        
    	// 关键字
          keyName(val) {
        
                this.filterObj.keyName = val;
                if ( this.$refs.resourceTree ) {
        
                    if ( this.ruleTimer ) {
        
                        clearTimeout(this.ruleTimer);
                        this.ruleTimer = null;
                    }
                    this.ruleTimer = setTimeout(() => {
        
                        this.$refs.resourceTree.filter(this.filterObj);
                        clearTimeout(this.ruleTimer);
                        this.ruleTimer = null;
                    }, 300);
                }
            },
            // 筛选等级
            level(val) {
        
                this.filterObj.level = val;
                this.treeKind = 3;
                if(!val.length) {
        
                    val = [1, 3, 5]
                }
                this.$refs.resourceTree.filter(this.filterObj);
            },
            // 筛选类型
            type(val) {
        
                this.filterObj.type = val;
                this.treeKind = 4;
                if(!val.length) {
        
                    val = [1, 2, 3]
                }
                this.$refs.resourceTree.filter(this.filterObj);
            },
    },
    methods: {
        
    	filterTree(value, data) {
        
                if (!value) return true;
                    value.keyName = value.keyName.toLowerCase();
                    let rulesLevel = data.level;
                    let rulesType = data.type;
                    let levelTrue = (value.level && value.level.length && value.level.indexOf(rulesLevel) > -1) || !(value.level && value.level.length) ? true : false;
                    let typeTrue = (value.type && value.type.length && value.type.indexOf(rulesType) > -1) || !(value.type && value.type.length) ? true : false;
                    return levelTrue && typeTrue && (!value.keyName || data.name.toLowerCase().indexOf(value.keyName) !== -1);
            },
    }