Use Cascader cascade selection in Vben Admin (based on Ant Design Vue)

The cascading selector component of Ant Design Vue is used here, click here to go directly to the official website .

1. Introduce components in Vben

import {
  Cascader,
} from 'ant-design-vue/es';

2. Use components on the page

disabled: indicates whether it is disabled
v-model: value: dynamic binding
style: custom style
: dropdown-style: custom floating layer style
options: optional data
fieldNames: custom optional data corresponding to Cascader data format (custom options The field of label name children)
@change: the callback after the selection is completed
change-on-select: this interaction allows only the parent option to be selected
expand-trigger: the way the secondary menu expands

 <Cascader
     :disabled="isUpdate"
     v-model:value="bomInventory.cInvCCode"
     style="width: 100%"
     :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
     :options="inventoryTreeList"
     :fieldNames="{
       label: 'cInvCName',
       key: 'cInvCCode',
       value: 'cInvCCode',
     }"
     placeholder="请选择存货分类"
     @change="choseCode"
     change-on-select
     expand-trigger="hover"
                  />

3. Echo problem

According to the post-click callback method provided by the official website

value: the selected value (including its parent)
selectedOptions: the specific information of the selected value (including its parent).
It can be seen from this that the value obtained after selection is an array. In practice, we usually only need the selected value. So here's what to do

//获取当前值
value[value.length - 1]

So when echoing, construct the current value and its parent