elementui 树，多个查询条件搜索筛选

最新推荐文章于 2023-06-20 15:06:11 发布

弯腰捡代码

最新推荐文章于 2023-06-20 15:06:11 发布

阅读量1.4k

点赞数

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_38655115/article/details/127865424

版权

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);
        },
}

直接传入一个对象进行判断就可以实现多个筛选的操作