Ant Design Vue — Cascade Selection Box and Checkbox

Photo by Drew Stewart on Unsplash

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"…