Element Cascaderカスケードセレクターは、デフォルト値とドロップダウンボックスがクリアされているピットを複数選択します

要件：複数選択、ノードの最後のレベルの表示、検索可能、およびロード時のデフォルト値の表示。

表示：

 

コード

                           <el-form-item>
                            <el-cascader
                                    :options="dataForType"
                                    placeholder="默认标签"
                                    :props="props"
                                    :show-all-levels="false"//仅显示最后一级
                                    filterable //筛选
                                    node-key="label"
                                    ref="dataRef"
                                    @change="cascaderChange"
                                    v-model="dataRefValue"
                                    clearable//可批量清空
                            >
                            </el-cascader>

data: function () {
     return {
        dataRefValue:[["0110","011001"],["0150"],],//多选格式
        vm.dataForType:[],
        props: {
                    label: 'name',
                    value: 'tagsCode',
                    children: 'children',
                    multiple: true,//多选
                    disabled: 'disabled'
                },
    }
}

 methods: {
        cascaderChange(){
                console.log(vm.dataRefValue)
                console.log(this.$refs.dataRef.getCheckedNodes())
        },
               
          }

途中でピットが発生しました。デフォルト値の問題：this。$ refs.dataRef.setCheckedNodes（[data]）このメソッドはツリーであり、カスケードでは使用できないため、v-modelをコンポーネントにバインドする必要があります。 、v-modelがバインドされていますdataRefValueを設定します。これは、dataRefValueに指定された初期値：['1'、 '2']で、エコーされたページを見つけ、['1'、 '2'、]に変更し、追加します最後の値の後のコンマわかりました。

 

パラメータのクリアについて話しているとき、最初にrefを結び、this。$ refs.dataRef.getCheckedNodes（）を使用して値を取得しましたが、クリアすると、ドロップダウンボックスがキャンセルされてクリックされたことがわかりました。選択ボックス。最後に、2つのメソッドは、クロスのキャンセルに問題はありません。次の図に示すように、this。$ refs.dataRef.getCheckedNodes（）の値は正しいです。

 

上記の2つは正しいですが、図に示すように、選択ボックスのデータの後にある十字をクリックします。

this。$ refs.dataRef.getCheckedNodes（）の値は、クリック前のデータを示しています。つまり、選択ボックスのデータを1つずつクリアすると、最後の値が取得されます。解決策は、this。$ refs.dataRef.getCheckedNodes（）の代わりにv-modelの値を使用することです。vモデルの値は上位レベルのデータであるため、トラバース時に子ノードを取得するには、次の方法を使用できることに注意してください。

for (let item of vm.dataRefValue) {
        console.log(item[item.length-1])
           
    }