elementui カスケード セレクターの設定はオプションではなく、随時更新されます

まず第一に、私の要件は、カスケード セレクターが最大 3 つの値しか選択できないことです。3 つの値を選択すると、後続の選択を解除する必要があるため、すべての値が無効になります (既に選択されている値を除く)。選択を解除すると、それまで選択できなかった項目がオプションになります。

その後、無効な値を直接設定してコンソールに出力すると、確かに無効に設定されていますが、カスケード セレクターの更新が同期されていないことがわかりました。

インターネットで次の方法を見つけました。

<el-cascader
          ref="cascaderItem"
          :options="options"
          :props="props"
          collapse-tags
          @change="handleChange"
          :key="cascaderKey"    // 就是这个cascaderKey
          :value="value"
></el-cascader>

その後、更新されるたびに cascaderKey をリセットします。、

let obj = this.$refs["cascaderItem"].getCheckedNodes();
// 遍历已选择节点，保证其可以取消选择
for (let chooseNode of obj) {
    chooseNode.data.disabled = false;
    this.cascaderKey = Math.random();
}

確かにビューを更新することは可能ですが、セレクターのドロップダウン ボックスは更新されるたびに消えるため、再度開いて再選択する必要があります。そして、奇妙な問題が発生しやすいです。たとえば、今日問題が発生しました: たとえば、最初に中国の GDP、1 人当たり GDP、都市化率を選択し、次に都市化率と 1 人当たり GDP の選択を解除します。1 人当たり GDP を再度選択すると、handleChange イベントは実行されません。引き金になった。ビューを再度更新する必要があるため、ユーザーのエクスペリエンスが低下します。

しかし実際には、解決策も非常に簡単で、vue の $set メソッドを直接使用することであり、このメソッドを使用すると、ビューを時間内に更新できるだけでなく、以前の奇妙な問題を回避することもできます。

// 遍历已选择节点，保证其可以取消选择
for (let chooseNode of obj) {
    this.$set(chooseNode.data,"disabled",false)
}

最終的には、vue の詳細をいくつか明確に把握する必要がありますが、配列の変更を監視できない可能性があることを早めに考えることができれば、この問題はそれほど長く悩まされることはなくなるかもしれません。 。