Vben Admin で Cascader カスケード選択を使用する (Ant Design Vue に基づく)

ここでは、Ant Design Vue のカスケード セレクター コンポーネントが使用されています。ここをクリックすると、公式 Web サイトに直接アクセスできます。

1. Vben にコンポーネントを導入する

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

2. ページ上のコンポーネントを使用する

無効: 無効かどうかを示します。
v-model: 値: ダイナミック バインディング
スタイル: カスタム スタイル
: ドロップダウン スタイル: カスタム フローティング レイヤー スタイル
options: オプション データ
fieldNames: Cascader データ形式に対応するカスタム オプション データ (カスタム オプション ラベル名のフィールド) Children)
@change: 選択が完了した後のコールバック
change-on-select: このインタラクションでは親オプションのみを選択できます
expand-trigger: セカンダリ メニューを展開する方法

 <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. エコーの問題

公式Webサイトが提供するクリック後のコールバックメソッドによる

value: 選択された値 (その親を含む)
selectedOptions: 選択された値 (その親を含む) の特定の情報
このことから、選択後に取得される値は配列であることがわかります。実際には、通常は選択された値のみが必要です値。それでは、次のようにします。

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

したがって、エコーするときに、現在の値とその親を構築します。