holiber/sl-vue-tree

I need filter function

FactAttacker opened this issue · 5 comments

Hello.
I'm not very good at English and please acknowledge.
and It's good module.
Can you make a filter function on this?
I think it is better.

thankyou!

Hi. Can you add more description about what do you mean by filter function?

Hi, went here for that too

I know it can be made outside the scope of sl-vue-tree but I believe it could be useful for people to have a text field which can act as a "search" filter

It would hide all nodes (except parents of nodes which are shown) that don't match the text in the field, kind of what we can see in multiselect fields.

I hope my message makes sense ^^

Here's a method to customize to your needs @FactAttacker

filterNodes() {    
      function copy(o) {
        return Object.assign({}, o);
      }
    
      let f = (o) => {
        if (o[this.nodeKeyToFilter].toLowerCase().
            includes(this.filter.toLowerCase())) return true;
      
        if (o.children) {
          return (o.children = o.children.map(copy).filter(f)).length;
        }
      };
    
      this.filteredNodes = this.nodes.map(copy).filter(f);
    },

Here's a method to customize to your needs @FactAttacker

filterNodes() {    
      function copy(o) {
        return Object.assign({}, o);
      }
    
      let f = (o) => {
        if (o[this.nodeKeyToFilter].toLowerCase().
            includes(this.filter.toLowerCase())) return true;
      
        if (o.children) {
          return (o.children = o.children.map(copy).filter(f)).length;
        }
      };
    
      this.filteredNodes = this.nodes.map(copy).filter(f);
    },

Can you explain how this would be utilized along with the sl-vue-tree control?

Here's a method to customize to your needs @FactAttacker

filterNodes() {    
      function copy(o) {
        return Object.assign({}, o);
      }
    
      let f = (o) => {
        if (o[this.nodeKeyToFilter].toLowerCase().
            includes(this.filter.toLowerCase())) return true;
      
        if (o.children) {
          return (o.children = o.children.map(copy).filter(f)).length;
        }
      };
    
      this.filteredNodes = this.nodes.map(copy).filter(f);
    },

Can you explain how this would be utilized along with the sl-vue-tree control?

Never mind - once I wrapped my head around it, I figured it out.