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.
Cascade Selection Box Default Value
We can set the default value of a cascade selection box with the default-value prop:
<template>
<a-cascader :options="options" @change="onChange" :default-value="['fruit', 'apple']"/>
</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>
We just pass in an array of values from top-level down to set it.
Also, we can add an icon on the right of the input by populating the suffixIcon prop:
<template>
<a-cascader :options="options" @change="onChange">
<a-icon slot="suffixIcon" type="smile" class="test"/>
</a-cascader>
</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>
Cascade Selection Field Names
We can set the field-names prop to set the property names of the value and label:
<template>
<a-cascader
:options="options"
@change="onChange"
:field-names="{ label: 'name', value: 'code', children: 'items' }"
></a-cascader>
</template>
<script>
export default {
data() {
return {
options: [
{
code: "fruit",
name: "Fruit",
items: [
{
code: "apple",
name: "Apple"
}
]
},
{
code: "drink",
name: "Drink",
children: [
{
code: "coffee",
name: "Coffee"
}
]
}
]
};
},
methods: {
onChange(value) {
console.log(value);
}
}
};
</script>
The object has the label , value , and children as the keys.
And we have the property names we want to set them to as the values.
Checkbox
We can add a checkbox to with the a-checkbox component:
<template>
<a-checkbox @change="onChange">Checkbox</a-checkbox>
</template>
<script>
export default {
methods: {
onChange(e) {
console.log(e.target.checked);
}
}
};
</script>
The change event is emitted when we check or uncheck the checkbox.
e.target.checked has the checked value.
Checkbox Group
We can add the a-checkbox-group component to add a group of checkboxes:
<template>
<div>
<div>
<a-checkbox
:indeterminate="indeterminate"
:checked="checkAll"
@change="onCheckAllChange"
>Check all</a-checkbox>
</div>
<br>
<a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange"/>
</div>
</template>
<script>
const plainOptions = ["Apple", "Pear", "Orange"];
const defaultCheckedList = ["Apple", "Orange"];
export default {
data() {
return {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
plainOptions
};
},
methods: {
onChange(checkedList) {
this.indeterminate =
!!checkedList.length && checkedList.length < plainOptions.length;
this.checkAll = checkedList.length === plainOptions.length;
},
onCheckAllChange(e) {
Object.assign(this, {
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked
});
}
}
};
</script>
The indeterminate prop lets us set whether the checkbox is indeterminate.
a-checkbox-group has the checkbox group.
options has an array of options.
Conclusion
We can add the cascade selection box with various options.
Also, we can add the checkbox group.
