2

There is a multi-select feature available in the vue-treeselect library; but what I am looking at is a "Select All" option (see snippet below):

enter image description here

Is there some undocumented config or can this feature be implemented without too much hassle?

Akshay Lokur
  • 6,680
  • 13
  • 43
  • 62

2 Answers2

0

add this code between the treeselect tag

<treeselect>
<div class="d-flex p-1 justify-content-center" **slot="before-list"**>
<button @click="selectAll()" type="button" class="btn btn-light">Select All</button>
<button @click="deselectAll()" type="button" class="btn btn-light">Deselect All</button>
</div>
</treeselect>

and in your method add these two functions

selectAll(){
        this.ids= [];
        this.options.forEach((value, index) => {
            this.ids.push(value);
        });
},
deselectAll(){
      this.ids = null;
},
Momen Samir
  • 1
0

Yes, you can do it but for this, you have to make a custom code. use the below code.

This is a TreeSelect option

      <div class="form-group">
        <span>Users</span>
        <treeselect
          v-model="api.user_ids"
          :options="api.users.results"
          :multiple="true"
          @input="selectAll"
          placeholder="Select Users"
        />
        <br>
      </div>

Vuejs code

var app = new Vue({
delimiters: ["[[", "]]"],
el: "#content",
data: {
  api: {
   users: {
      results: [
       {
        id: 1,
        label: "Demo"
       },
       {
        id: 2,
        label: "Test"
       },
      ],
    },
  },
},
});

If you don't have any "Select All" option in "api.users.results" array then you have to add custom value at the zero(0) index.

            var self = this;
            var response = self.api.users.results;
            var options = [{
              id: "all",
              label: 'Select All',
            }]
            self.api.users.results = options.concat(self.api.users.results);
            self.$forceUpdate();

This is a method for selecting all options.

selectAll: function () {
    var self = this;
    // check 'all' value is available in user id's array
    if (self.api.user_ids.includes('all')) {
      self.api.user_ids = [];
      _.forEach(self.api.users.results, function (item) {
        if (item.id != 'all'){
          // push each item id in user id's array
          self.api.user_ids.push(item.id);
        }
      });
    }
  }
Vivek Shah
  • 1