Cascaderカスケード要素は、使用してコンポーネントライブラリを選択します

素子-UIしばしばコンポーネントライブラリCascaderカスケードセレクタ、VUE成分を投影することができ、より多くのプロパティ内部、今櫛、参考のために
公式には、例えばホバーサブメニューをトリガするために、これは、次のパラメータを与えます

<el-cascader
 	expand-trigger="hover"
    v-model="value"
    :options="options"
    :props="cateProps"
    @change="handleChange">
</el-cascader>

Vモデルは、データに定義されている双方向結合の配列、です

あなたは、データソースをバインドしたいというオプションは、そのような製品データ、またはユーザーのリストなどのバックグラウンドデータAJAX要求アウト

小道具は、一般値は、IDなど三つのパラメータは、値表現は、選択した値に対応するラベル、子どもたちは、ラベルは、対応するを選択しているあなたが選択ボックスを作成したすべてのコンテンツの代表は、見ることができますカスケード構成オブジェクトの選択ボックスであり、コンテンツが示すid値、一般的に表現するための名前で名前の後、子どもたちは、ネストされたノードです

@changeは、私たちは自然に関数を定義する必要があり、すべてが選択ボックスで、ここで一連の事象が方法に変更すべき変更、すなわちユーザーがこのカスケード選択ボックスを選択し、最終的にはこの変更イベントを介して取得しますおよびコンテンツに対応したビジネスを示しています。

デフォルトでは、コンテンツなしに限り、次のレベルとして、2つの3階層の分類である、あなたが選ぶことができるかどうかをカスケード選択ボックス、どのようにそれは、その後変更イベントセレクタをリッスンする必要があり、ユーザーはそれの唯一の3階層分類を選択できるようにすることができます配列の長さが3に等しい場合、ユーザによって選択された配列（配列の長さは、データ・コンテンツである、データアレイのVモデルデータによって結合される）の長さを決定し、長さを選択してレンダリングすることができ、そのユーザを示す、3に等しくありません3階層分類が選択されていない場合、任意の処理をせずに出て行くために、この時点で戻ります。

handleChange() {
		//value是v-model绑定的值
        if(this.value.length!==3){
           this.value=[]
            return
        }
        //发起相应的数据请求
    }

注：データはあまりにも非常にオーバーフローの場合は、選択ボックスをカスケード接続し、ケースがあるでしょう、そして、グローバルスタイルシートに固定の高さを追加

.el-cascader-menu {
    height: 300px;
  }