前にコピーしたテーブル コンポーネントには 2 つのボタンがあります。いずれかを[編集]ボタンに変更します。
クリック イベント handleUpdate(scope.row)
をバインドします。この row
は現在のレコードのオブジェクトです。コンソールを追加して印刷します。
現在のレコードのプロジェクト名と説明をクエリし、それをフォームに割り当てる必要があります。データを表示します。ここでは、プロジェクト ID (一意性) に基づいてクエリを実行する必要があります。
バックエンド プロジェクト リストのインターフェイスを変更して、プロジェクト ID に基づくデータのクエリをサポートします:
handleUpdate でインターフェイスを呼び出します:
this.dialogFormVisible = true
の場合、まずダイアログ ボックスを開き、インターフェイスにパラメーターを渡すためのデータの projectQuery オブジェクトに ID を追加します。次に、row.id
を各行の ID に this.projectQuery.id
に割り当てます。最後にインターフェイスをリクエストします。返されたリストには要素が 1 つだけあり、projectName を入力します。この結果の
と description
をフォームに割り当てることができます。
テスト:
編集ページのフォームは新規ページと同じなので、新たに記述する必要はありません。したがって、作成時と編集時にそれぞれ対応する API を呼び出すようにフォームにいくつかの変更を加える必要があります。
新しいインターフェイスはすでに存在します。更新されたインターフェイスを追加して、ProjectService への書き込みを続けます。
対応する外部コントローラー プロセッサもあります:
アップデート インターフェイスをセルフテストすると、正常に動作します。
これが新しいフォームか編集フォームかを区別するには、フィールドを追加する必要があります。それを識別するためのデータ: dialogStatus
。
フォームの [保存ボタン] を変更します。クリックすると、dialogStatus
の値を使用して、新しいメソッドを呼び出すか更新されたメソッドを呼び出すかを決定します。 :
dialogStatus
が "create"
と等しい場合は追加され、それ以外の場合は変更されます。
次に、編集ページ handleUpdate
のデータ表示の処理方法も変更され、dialogStatus
に割り当てられる値は update
になります。
バックエンド更新インターフェイスを呼び出すための新しい updateData
メソッドが追加されました。ただし、インターフェイス リクエストを js ファイルに追加してから、それを vue ページ ファイルにインポートすることを忘れないでください。
次に、updateData
メソッドのコードを完成させます。
ここでも、 design [ [項目の追加]ボタンに変更します。[編集]ボタンをクリックしたため、dialogStatus
はupdate
と等しくなります。当然、追加をクリックすると、値が代入される必要があります。 create
. add()
メソッドを呼び出すことができます。
ただし、前の [項目の追加] ボタンは this.dialogFormVisible = true
にバインドされているため、これら 2 つを抽出してメソッド handleAdd
middle に書き込みます。 :
次に、この新しいメソッドをバインドする新しいボタンを追加します。
最後に、機能をテストします。
以上がspringboot vue プロジェクト管理のフロントエンドとバックエンドに編集機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。