Beranda>Kode sumber PHP>Kategori lainnya
Unduh

Elsa

⚡ elsa (admin elemen sederhana) didasarkan pada elemen-ui dan merangkum el-form, el-table, dan komponen lainnya, dan cocok untuk pengembangan cepat proyek manajemen backend.

Untuk contoh penggunaan, lihat: contoh

Mulai cepat 

 npm i elsa - vue - S 
 // vue main.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Elsa from 'elsa-vue'

Vue . use ( Element )
Vue . use ( Elsa )

Fitur

  • kartu lain
    • Mendukung pengaturan utama dan subtitle
  • meja lain
    • Kolom daftar yang dapat dikonfigurasi
    • Mendukung kontrol paging
    • Mendukung tampilan data berbentuk pohon dan pemuatan lambat
  • bentuk elsa
    • Komponen formulir yang didukung
      • el-masukan
      • el-radio
      • el-kotak centang
      • el-pilih
      • el-unggah
      • el-xxx-pemilih
    • Tata letak khusus
    • Formulir pengaturan ulang checksum
    • Penguraian sarang objek bersarang
    • Bentuk pengaturan dinonaktifkan secara keseluruhan
    • Informasi tip untuk item formulir
    • Item formulir: dinamis/tertaut
      • dinonaktifkan/diaktifkan
      • tampilkan/sembunyikan
      • Ubah beberapa opsi secara dinamis

meja elsa

penggunaan:

  1. Dapatkan sumber data dataSource bertipe Array
  2. Konfigurasikan informasi kolom yang ditampilkan berdasarkan properti objek di dataSource.
  3. Tetapkan paginasi parameter paginasi 
 < elsa-table border :columns =" columns " :dataSource =" dataSource " :pagination =" pagination " /> 
 export default {
  data ( ) {
    return {
      dataSource : [
        { name : 'eminoda' , age : 30 } ,
        { name : 'foo' , age : 40 } ,
        { name : 'bar' , age : 50 }
      ] ,
      columns : [
        { label : '序号' , align : 'center' , type : 'index' , width : '50' } ,
        { label : '姓名' , align : 'center' , prop : 'name' , width : '100' } ,
        { label : '年龄' , align : 'center' , prop : 'age' , width : '100' }
      ] ,
      pagination : {
        pageSize : 10 ,
        currentPage : 1 ,
        total : 0 ,
        currentChange : currentPage => { } ,
        sizeChange : pageSize => { }
      }
    }
  }
}

Atribut ElsaTable

parameter menjelaskan jenis Nilai opsional nilai bawaan
kolom Informasi kolom Himpunan
Sumber data sumber data Himpunan
penomoran halaman Informasi paginasi Obyek
...elProps atribut el-tabel

ElsaTable.kolom

parameter menjelaskan jenis Nilai opsional nilai bawaan
jenis seleksi menambahkan kolom kotak pilihan
indeks menambahkan kolom nomor seri
perluas Tampilkan lebih banyak		 Rangkaian seleksi/indeks/perluas
label judul Rangkaian
menopang mengurai bidang Rangkaian
lebar Lebar kolom yang sesuai Rangkaian
tetap Apakah kolom tersebut dipasang di kiri atau kanan, true berarti dipasang di kiri String/Boolean benar, kiri, kanan
pemformat Pemformatan data Fungsi (baris, kolom, nilai sel)
tampilkan-overflow-keterangan alat Tampilkan keterangan alat ketika konten terlalu panjang dan tersembunyi Boolean

Untuk lebih jelasnya lihat: kolom el-tabel

ElsaTable.elProps

parameter menjelaskan jenis Nilai opsional nilai bawaan
data Ganti dengan dataSource
berbatasan Apakah akan memiliki batas vertikal Boolean PALSU
ukuran ukuran Rangkaian sedang/kecil/mini
bugar Apakah lebar kolom itu mandiri Boolean BENAR

Untuk lebih jelasnya, lihat: atribut el-tabel

Acara Meja Elsa

parameter menjelaskan jenis Nilai opsional nilai bawaan
perubahan seleksi Peristiwa ini dipicu ketika pilihan berubah Fungsi (pilihan)

Untuk lebih jelasnya, lihat: acara el-table

? Catatan: Beberapa Peristiwa sulit diimplementasikan berdasarkan struktur file saat ini (seperti: pengurutan, pemfilteran, penggabungan formulir...), dan dapat diimplementasikan dengan mendefinisikan konten file konfigurasi dalam data (bukan metode impor) )

bentuk elsa

penggunaan:

  1. Tentukan model model data formulir
  2. Konfigurasikan bidang formulir dan tentukan tata letaknya (opsional) 
 < elsa-form :config =" fields " :model =" model " labelWidth =" auto " label-suffix =" : " >
  < el-row type =" flex " justify =" center " >
    < el-button @click =" submit " type =" primary " >提交</ el-button >
    < el-button @click =" reset " type =" warning " style =" margin-left:10px; " >重置</ el-button >
  </ el-row >
</ elsa-form > 
 export default {
  data ( ) {
    return {
      fields : {
        name : {
          label : '用户名' ,
          elTag : 'el-input' ,
          elAttrs : {
            placeholder : '请输入用户名'
          } ,
          customRender : 'nameCheck' ,
          rules : [ { required : true , message : '用户名不能为空' , trigger : 'change' } ]
        } ,
        password : {
          label : '密码' ,
          elTag : 'el-input' ,
          elAttrs : {
            type : 'password' ,
            showPassword : true
          } ,
          rules : [ { required : true , trigger : 'change' } ]
        }
      } ,
      model : {
        name : '' ,
        password : ''
      }
    }
  }
}

Atribut ElsaForm

parameter menjelaskan jenis Nilai opsional nilai bawaan
konfigurasi Konfigurasi item formulir Obyek
model membentuk model data Obyek
tata letak tata letak formulir Himpunan
dengan disabilitas Seluruh formulir dinonaktifkan Boolean PALSU
...elProps Konfigurasi item formulir Obyek

ElsaForm.config

parameter menjelaskan jenis Nilai opsional nilai bawaan
bidang Bidang item formulir, sesuai dengan atribut model Obyek
bidang.label nama Rangkaian
bidang.elTag tag bentuk elemen Rangkaian el-input/select/radio/cascader/pemilih tanggal/pemilih waktu/unggah
bidang.elAttrs Atribut item formulir (lihat komponen terkait elTag) Obyek
field.elStyle Bentuk gaya gaya item Obyek
bidang.ekstra Pesan cepat Rangkaian
bidang.extraIcon ikon ikon pesan cepat Rangkaian el-ikon-peringatan-garis besar
bidang.aturan Aturan validasi formulir Himpunan
bidang.pilihan Jika dicentang, pilih digunakan sebagai tampilan data Himpunan
bidang.terlihat Linkage, Anda dapat mengontrol tampilan dan persembunyian sesuai model[diajukan] Boolean/String/Fungsi({model})
bidang.customRender Templat ditampilkan di sisi kanan elTag Rangkaian
bidang.slotRender Template di dalam elTag (misalnya: konten di upload) Rangkaian

Untuk lebih jelasnya, lihat: metode el-form-item

ElsaForm.field.elAttrs

Contoh beberapa sifat khusus

parameter menjelaskan jenis Nilai opsional nilai bawaan
dengan disabilitas Cacat Fungsi({model})/ Boolean
adalahRemote elTag malas memuat el-select Boolean
Metode jarak jauh elTag malas memuat el-select Fungsi(selesai,{model}) / Boolean
malas elTag adalah pemuatan el-cascader yang lambat Boolean
beban malas elTag adalah pemuatan el-cascader yang lambat Fungsi(simpul, tekad, { selesai }) / Boolean

ElsaForm.tata letak

parameter menjelaskan jenis Nilai opsional nilai bawaan
elTag tag bentuk elemen Rangkaian el-baris/kol
elAttrs Atribut item formulir (lihat komponen terkait elTag) Obyek
anak-anak anak Obyek
bidang bidang item formulir Rangkaian

ElsaForm.elProps

parameter menjelaskan jenis Nilai opsional nilai bawaan
lebar label Lebar label bidang formulir Rangkaian
akhiran label Akhiran untuk label bidang formulir Rangkaian
ukuran ukuran Rangkaian sedang/kecil/mini

Untuk lebih jelasnya, lihat: atribut el-form

Metode ElsaForm

parameter menjelaskan jenis Nilai opsional nilai bawaan
mengesahkan Validasi data formulir Fungsi (salah, model)
resetFields Setel ulang item formulir Fungsi(alat peraga<Array | String>)
hapusValidasi Hapus hasil verifikasi Fungsi(alat peraga<Array | String>)

Untuk lebih jelasnya, lihat: metode el-form

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua