Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.
In this article, we’ll look at how to use it in our Vue apps.
Customize Autocomplete
We can customize our autocomplete input with various props.
The filter-options prop lets us change how choices are filtered:
<template>
<a-auto-complete
:data-source="dataSource"
style="width: 200px"
placeholder="input here"
:filter-option="filterOption"
/>
</template>
<script>
export default {
data() {
return {
dataSource: ["apple", "orange", "grape"]
};
},
methods: {
filterOption(input, option) {
return (
option.componentOptions.children[0].text
.toUpperCase()
.indexOf(input.toUpperCase()) >= 0
);
}
}
};
</script>
We get the text input value which is the input parameter with the option.componentOptions.children[0].text property.
Then we compare both of them as uppercase.
If we return true , then it’s displayed in the dropdown.
Cascade Selection Box
We can add a cascade dropdown menu with the a-cascader component.
For example, we can write:
<template>
<a-cascader :options="options" placeholder="Please select" @change="onChange"/>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "fruit",
label: "Fruit",
children: [
{
value: "apple",
label: "Apple"
}
]
},
{
value: "drink",
label: "Drink",
children: [
{
value: "coffee",
label: "Coffee"
}
]
}
]
};
},
methods: {
onChange(value) {
console.log(value);
}
}
};
</script>
to add the options with the options reactive property.
We set that as the value of the options prop.
It emits the change event with the selected item.
We can add the change-on-select prop to emit the change event on select:
<template>
<a-cascader :options="options" placeholder="Please select" change-on-select @change="onChange"/>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "fruit",
label: "Fruit",
children: [
{
value: "apple",
label: "Apple"
}
]
},
{
value: "drink",
label: "Drink",
children: [
{
value: "coffee",
label: "Coffee"
}
]
}
]
};
},
methods: {
onChange(value) {
console.log(value);
}
}
};
</script>
Also, we can render the selected item in a custom way by populating the displayRender slot:
<template>
<a-cascader :options="options" placeholder="Please select" change-on-select @change="onChange">
<template slot="displayRender" slot-scope="{ labels, selectedOptions }">
<span v-for="(label, index) in labels" :key="selectedOptions[index].value">
<span v-if="index === labels.length - 1">
{{ label }} (
<a @click="e => handleAreaClick(e, label, selectedOptions[index])">
{{
selectedOptions[index].code
}}
</a>)
</span>
<span v-else @click="onChange">{{ label }} /</span>
</span>
</template>
</a-cascader>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "fruit",
label: "Fruit",
code: 1,
children: [
{
value: "apple",
label: "Apple",
code: 2
}
]
},
{
value: "drink",
label: "Drink",
code: 3,
children: [
{
value: "coffee",
label: "Coffee",
code: 4
}
]
}
]
};
},
methods: {
onChange(value) {
console.log(value);
}
}
};
</script>
selectedOptions[index] has the selected item.
labels have the label for each value.
Disable Items
We can disable items with the disabled property:
<template>
<a-cascader :options="options" @change="onChange"/>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "fruit",
label: "Fruit",
children: [
{
value: "apple",
label: "Apple"
}
]
},
{
value: "drink",
label: "Drink",
disabled: true,
children: [
{
value: "coffee",
label: "Coffee"
}
]
}
]
};
},
methods: {
onChange(value) {
console.log(value);
}
}
};
</script>
Conclusion
We can customize our autocomplete component with many ways.
Also, Ant Design Vue comes with a cascade selection dropdown.
