vue element crud

Sayangnya, repositori ini tidak lagi dikelola, risiko penggunaan ditanggung Anda sendiri.

Catatan: Proyek ini mungkin memiliki beberapa masalah dalam implementasi komponen, dan seiring berjalannya waktu, versi kerangka Vue dan pustaka elemen UI juga dapat diperbarui, yang mungkin tidak sesuai untuk saat ini dan masa depan.

vue-elemen-mentah

Komponen vue CRUD yang dibungkus berdasarkan komponen vue UI yang terkenal -- element-ui.

Komponen tambah, hapus, ubah, dan periksa berdasarkan komponen element-ui .

Ini adalah demo sederhana.

Anda dapat membaca contoh dan file kode sumber Crud.vue dalam proyek untuk membantu Anda memahami penggunaan spesifik komponen tersebut.

Pembangunan lokal

Anda dapat mengunduh atau mengkloning repositori ini selama Anda menyukainya. Kemudian Anda dapat menjalankan skrip npm

$ npm install
$ npm run dev

Buka terminal baru,

$ npm run build:watch

Penggunaan

Anda dapat menggunakan vue-element-crud sebagai plugin vue atau sebagai komponen vue.

Jika Anda ingin memperlakukannya sebagai komponen, Anda dapat mengimpor CRUD sebagai komponen.

Sebagai komponen

 import { CRUD } from 'vue-element-crud'

export default {
  components : { 'crud' : CRUD }
}

Jika tidak, Anda dapat memperlakukannya sebagai sebuah plugin.

Sebagai Plugin

Langkah-1, inisiasi proyek

Anda mungkin perlu memulai proyek vue atau mengambil proyek yang sudah ada untuk melanjutkan karena vue-loader atau babel-loader atau css-loader diperlukan untuk elemen-ui.

$ vue init webpack < project-name > 

Langkah-2, instal

Komponen ini bergantung pada element-ui, dan element-ui akan otomatis terinstal saat Anda menginstal vue-element-crud , jadi Anda tidak perlu menginstal element-ui tambahan.

$ npm install -S vue-element-crud

Langkah-3, gunakan vue

Tambahkan baris berikut ini ke main.js Anda

 import 'element-ui/lib/theme-default/index.css'
import ElementUI from 'element-ui'
import CRUD from 'vue-element-crud'

Vue . use ( ElementUI )
Vue . use ( CRUD ) 

Langkah-4, lihat contoh

Anda dapat membaca dokumen atau contoh untuk mengetahui cara mengimplementasikan props dan metode dari vue-element-crud ini.

API

alat peraga	jenis	diperlukan	bawaan	keterangan
data	Himpunan	BENAR	---	Susunan data tabel
membentuk	Obyek	BENAR	---	Objek formulir untuk menyimpan variabel item formulir
bidang	Obyek	BENAR	---	Objek yang mendeskripsikan struktur item formulir. misal. { name: { label: 'name', length: 20, type: String, options: [{ label: 'Mike', value: 'Mike' }] }
aturan	Obyek	PALSU	---	Objek yang mendeskripsikan aturan item formulir. Misalnya. { name: [{ required: true, message: 'name is required.' }] }
ukuran	Rangkaian	PALSU	'large'	Ubah ukuran dialog menjadi 'full' atau 'large' atau small atau dihilangkan.
labelLebar	Rangkaian	PALSU	'100px'	Label lebar formulir dan tabel.
sebaris	Boolean	PALSU	false	Tentukan apakah item formulir hidup sebaris atau tidak.
meja	Obyek	PALSU	---	Jika struktur tabel tidak sesuai dengan struktur formulir, Anda dapat menentukannya { name: 'name' } .
tindakan	Himpunan	PALSU	['create', 'destroy', 'update']	Tindakan yang kejam.
memuat	Boolean	PALSU	false	CRUD dalam keadaan XHR. Tombol kirim dinonaktifkan jika benar.
sorot CurrentRow	Boolean	PALSU	false	Sorot tabel baris saat ini atau tidak.
gaya baris	Fungsi	PALSU	---	Function(row, index) gaya baris tabel.

acara	keterangan
membuka	acara dialog terbuka. atur editing ke true untuk menampilkan dialog.
menutup	acara tutup dialog. atur editing ke false untuk menutup dialog.
membuat	acara pembuatan formulir. Anda perlu menetapkan model formulir ke form .
memperbarui	acara pembaruan formulir. (row, index) diteruskan ke pengendali Anda perlu menetapkan baris ke form .
menghancurkan	peristiwa penghancuran baris tabel (row, index) diteruskan ke handler.
kirim	form submit event. (status, closeDialog (status, closeDialog) diteruskan ke handler. 0 berarti membuat, dan 1 berarti memperbarui.
memperluas	acara perluasan tabel. (row, expanded) diteruskan ke pengendali. Lihat acara tabel elemen-ui.
klik baris	acara klik baris tabel. (row, event, column) diteruskan ke handler. Lihat acara tabel elemen-ui.
baris-dblclick	acara dblclick baris tabel. (row, event) diteruskan ke handler. Lihat acara tabel elemen-ui.

slot	keterangan
indeks	Slot indeks baris tabel. Lihat slot tabel elemen-ui.
memperluas	Slot perluasan tabel. Lihat slot tabel elemen-ui.
tambahkan	Slot tambahan meja.
bawaan	Slot tambahan tabel.
tambahan	Bentuk slot tambahan.

Templat Anda mungkin terlihat seperti ini.

 <crud :data="data" :form="form" :rules="rules" :fields="fields" inline index
    :editing="editing" @open="handleOpen" @close="handleClose"
    @create="handleCreate" @update="handleUpdate" @destroy="handleDestroy" @submit="handleSubmit"/>

Berikut ini mixin sederhana yang dapat membantu Anda melakukan bootstrap. Cukup impor Simple .

 import { Simple } from 'vue-element-crud'

export {
  mixins : [ Simple ]
} 

Menyumbang

Jika Anda mempunyai ide tentang komponen ini, jangan ragu untuk memberi tahu kami. Anda dapat membuat terbitan baru untuk menjadikannya lebih baik.