Komponen jadual yang disalin sebelum ini mengandungi 2 butang , tukar salah satu daripadanya kepada butang [Edit].
Ikat acara klik handleUpdate(scope.row)
Ini row
ialah objek rekod semasa Anda boleh menambah konsol untuk mencetaknya.
Anda perlu menanyakan nama projek dan perihalan rekod semasa dan menyerahkannya kepada borang. untuk memaparkan data. Di sini anda perlu membuat pertanyaan berdasarkan id projek (keunikan).
Ubah suai antara muka senarai projek bahagian belakang untuk menyokong data pertanyaan berdasarkan id projek:
Panggil antara muka dalam handleKemas kini:
this.dialogFormVisible = true
, mula-mula buka kotak dialog dan tambahkan id dalam objek projectQuery data untuk menghantar parameter ke antara muka. Kemudian tetapkan row.id
id dalam setiap baris kepada this.projectQuery.id
dan akhirnya minta antara muka hanya terdapat satu elemen dalam senarai yang dikembalikan Hanya berikan projectName
dan description
hasil ini.
Ujinya:
Borang edit halaman adalah sama dengan halaman baru, jadi tidak perlu menulis satu lagi. Oleh itu, beberapa pengubahsuaian perlu dibuat pada borang untuk memanggil API yang sepadan apabila membuat dan mengedit masing-masing.
Antara muka baharu sudah wujud Sekarang tambahkan antara muka yang dikemas kini dan teruskan menulis dalam ProjectService.
Terdapat juga pemproses pengawal luaran yang sepadan:
Uji sendiri antara muka kemas kini, ia berfungsi seperti biasa.
Untuk membezakan sama ada ini borang baharu atau borang edit, anda perlu menambah medan pada data untuk mengenal pastinya: dialogStatus
.
Ubah suai [Butang Simpan] dalam borang Apabila diklik, nilai dialogStatus
digunakan untuk memutuskan sama ada untuk memanggil kaedah baharu atau dikemas kini:
Apabila dialogStatus
sama dengan "create"
, ia ditambah, jika tidak, ia diubah suai.
Kemudian kaedah pemprosesan paparan data pada halaman edit handleUpdate
juga diubah suai, dan nilai yang diberikan kepada dialogStatus
ialah update
:
TambahupdateData
Kaedah untuk memanggil antara muka kemas kini bahagian belakang. Tetapi jangan lupa untuk menambah permintaan antara muka dalam fail js, dan kemudian mengimportnya ke dalam fail halaman vue.
Kemudian terus melengkapkan kod kaedah updateData
:
Di sini kami juga mereka bentuk [Projek Baharu ] Perubahan butang, kerana butang [Edit] diklik, dialogStatus
adalah sama dengan update
, jadi secara semulajadi apabila anda mengklik untuk menambah, nilai mesti diberikan kepada create
untuk memanggil kaedah add()
.
Tetapi memandangkan butang [Tambah Item] sebelumnya telah diikat pada this.dialogFormVisible = true
, kedua-duanya diekstrak dan ditulis ke dalam kaedah handleAdd
:
Kemudian tambahkan kaedah mengikat butang baharu.
Akhir sekali, uji kefungsian.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penyuntingan dalam pengurusan projek springboot vue depan dan belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!