レンダリング:
これは変更されたポップアップ ウィンドウです。実現したい機能は、リストの変更ボタンをクリックするとデータをポップアップ ウィンドウに表示し、[保存] をクリックするとポップアップ ウィンドウを閉じることです。
1. 「変更」をクリックしてポップアップウィンドウを展開します。
eldialogコンポーネントを利用して、v-modelでバインドした値がtrueのときにポップアップウィンドウが開きます データ表示用のコンポーネントに自分で書いたコンポーネントを置きます ここに関数を書いてバインドできるようになります上記では、この関数は、dialogtablevisible変数を処理するために使用されます。最初、この変数の初期値は flase であり、変更ボタンをクリックしたときに、変数を true に変更して、オープニング関数を実現します。
2. [キャンセル] 閉じるボタンをクリックします。
ここでは、emit メソッドを使用する必要があります。el-dialo のサブコンポーネントを通じて、クリックして値を渡します。渡された値を使用して親コンポーネントで新しい関数を実行します。この関数は、dialogtablevisible 変数を flase に変更するため、キャンセルする場合はポップアップを閉じ、
サブアセンブリ:
親コンポーネント:
3. リストページのデータを編集の初期値としてサブコンポーネントに渡す
親コンポーネントのパス:
サブコンポーネントは以下を受信してレンダリングします。
ここで、props データを監視するには watch を使用する必要があることに注意してください。データが毎回更新される場合は、watch で更新を監視し、値を再割り当てする必要があります。そうでない場合は、2 番目のリスト データをクリックすると、データが間違ってしまいます。
上に花を散らす