ElementUI のカスケード カスケード選択コントロールは採掘ピットを使用します。問題の解決策をエコーするようにデフォルト値を設定します (個人的なテストは機能します!)。

その他の記事については、私の個人ブログをご覧ください: https://seven777777.github.io/myblog/

発生した問題とその解決方法を記録します。これが将来同じ問題に遭遇する人に役立つことを願っています。

問題の説明

elementui のカスケード選択コントロールを使用し、デフォルト値を設定してデフォルト値を変更する必要がある場合、問題が見つかります。

まず、次のように関連するコアコードを投稿します。

<el-cascader
    ref="locationCascader"
    v-model="location"
    placeholder="省份/城市/区域"
    :options="cityRegionObj">
</el-cascader>

data(){
    return {
        location:[]
    }
}

1. 初めてデフォルト値を設定します、このときの場所の値は ['湖北省'、'武漢'、'東湖ハイテク'] です。

最初の読み込み表示に問題がないことがわかります。

2. locationの値を再度[]に設定します

この時点では、コントロール ドロップダウンの値はまだ最後の値を保持しています。

解決プロセス

最初に思い浮かぶのは、公式 API を調べて、気づいていない属性やメソッドがないかどうかを確認することです。

いろいろ調べてみたところ、以下のような方法を見つけました。

それで自信を持って練習に臨んだところ、ミスを発見しました。

この道がうまくいかないので、仕方なくネットで解決策を探し続けましたが、ソースコードの修正などの解決策もいくつか提案されていましたので、いくつか試してみましたが、だめでした。

最後にここで解決策を見つけました☞ https://github.com/ElemeFE/element/issues/18669 !

解決

methods:{
    <!--重新赋值前先调用此方法-->
    <!--this.$refs.locationCascader：这个值基于你之前在dom上定义的ref-->
    resetCasadeSelector() {
        if (this.$refs.locationCascader) {
            this.$refs.locationCascader.$refs.panel.activePath = []
            this.$refs.locationCascader.$refs.panel.calculateCheckedNodePaths()
        }
    }
}

私自身でテスト済みで効果はありますが、他に効果的な方法がある場合は、メッセージを残して交換してください。

私の個人公開アカウント [搴Fang Shimeng] にご注目ください。