As a newcomer to VueJs, I am exploring how to create a component that enables multiple selection with a search option and the ability to select all or deselect all options.
To achieve this functionality, I am utilizing the vue-element-ui library. You can find more information about it here: .
I am looking to include the first option in the select-dropdown for this specific purpose.
Below is the code snippet that I have experimented with:
<template>
<el-select
v-model="selectTag.values"
placeholder="select profiles"
multiple
collapse-tags
filterable
remote
@change="values => handleSelectAll(values, 'routingProfile')"
:filter-method="handleFilter"
>
<el-option
v-for="option in selectTag.options"
:key="option.value"
:label="option.label"
:value="option.value"
>
</el-option>
</el-select>
</template>
<script>
import { Select, Option } from 'element-ui';
export default {
props: {},
components: {
[Select.name]: Select,
[Option.name]: Option
},
data() {
return {
selectTag: {
prvsState: [],
loading: false,
count: 0,
values: [],
options: [
{ value: 'all', label: 'SELECT/DESELECT ALL' },
{ value: 'value1', label: 'label1' },
{ value: 'value2', label: 'label2' }
]
}
};
},
methods: {
handleFilter(query) {
var searchQuery = query.toLowerCase();
var formField = this.selectTag;
var fieldOptions = formField.options;
var filterOptions = [{ value: 'all', label: 'Select/unselect all'
}];
fieldOptions.forEach(option => {
let optionLabel = option.label.toLowerCase();
if (optionLabel.includes(searchQuery)) {
filterOptions.push(option);
}
});
formField.options = filterOptions;
},
handleSelectAll(selectedValues) {
var fieldOptions = this.selectTag.options;
var prvsState = this.selectTag.prvsState;
if (selectedValues.includes('all')) {
if (prvsState.includes('all')) {
this.selectTag.values = [];
this.selectTag.prvsState = [];
} else {
this.selectTag.prvsState = selectedValues;
this.selectTag.values = [];
fieldOptions.forEach(option => {
if (option.value != 'all') {
this.selectTag.values.push(option.value);
}
});
}
} else {
this.selectTag.values = selectedValues;
this.selectTag.prvsState = selectedValues;
}
}
}
};
</script>
The code functions properly when the filter option is disabled but encounters issues with the search/filter functionality enabled. If you have any insights on how to resolve this issue or could recommend an alternative VueJs library for this task, your assistance would be greatly appreciated. Thank you!