ele easy table

ele-mudah-tabel

Memasang

 npm install ele-easy-table -S

memperkenalkan

 import 'ele-easy-table'

demo kode

 <ele-easy-table :form="form" :table="table" :formData.sync="formData" @getList="handleSearch"></ele-easy-table>

Lihat kode sumber demo untuk detailnya

Melihat

Tergantung pada elemen-ui, proyek Anda harus menginstal elemen-ui

Versi elemen-ui yang digunakan oleh kode sumber

 "element-ui": "^2.4.5"

API

Alat peraga

milik	menjelaskan	jenis	nilai bawaan
membentuk	Area kondisi kueri tabel	Obyek	{}
meja	Area tampilan meja	Obyek	{}
formData.sinkronisasi	bidang permintaan formulir	Obyek	{}
penomoran halaman	Apakah akan menampilkan area halaman	[Boolean,Objek]	BENAR
atribut lainnya	properti asli el-table	Lihat properti asli el-table	-

• membentuk item sub-konfigurasi

milik	menjelaskan	jenis	nilai bawaan	Komentar
kelas	Pengaturan gaya area kondisi kueri tabel	Obyek	-	-
gaya	Pengaturan gaya inline area kondisi kueri tabel	Obyek	-	-
lipatNum	Tabel diciutkan ketika terdapat lebih dari banyak kondisi kueri	Nomor	-	Tanpa parameter ini, semua akan ditampilkan
daftar	Daftar kondisi kueri tabel	Himpunan	-	Lihat kode sumber demo untuk detailnya

• item sub-konfigurasi tabel

milik	menjelaskan	jenis	nilai bawaan	Komentar
daftar	Daftar data tabel	Himpunan	-	-
kolom	Daftar header tabel	Himpunan	-	Lihat kode sumber demo untuk detailnya
sedang Memuat	Apakah akan menampilkan animasi pemuatan tabel	Boolean	-
tampilkanIndeks	Apakah akan menampilkan kolom nomor seri	Boolean	BENAR
indeksTetap	Apakah akan memperbaiki kolom nomor seri	Boolean	PALSU
indeksLabel	Sesuaikan teks header daftar nomor seri	Rangkaian	nomor seri
pilihan	Bentuk konfigurasi pilihan ganda	Obyek	{}

• item sub-konfigurasi pilihan

milik	menjelaskan	jenis	nilai bawaan	Komentar
konfigurasi	Bentuk beberapa properti pilihan	Obyek	-	-

• item sub-konfigurasi penomoran halaman

atribut asli el-pagination

Metode

@getList()

Dieksekusi ketika nomor halaman dialihkan atau nomor yang ditampilkan pada setiap halaman berubah, data diperoleh, dan kemudian ditetapkan ke table.list untuk memperbarui daftar.

acara tabel elemen lainnya

acara asli el-table, misalnya: @selection-change="handleSelectionChange" Lihat kode sumber demo untuk detailnya

Sejarah

v1.1.3

• 1. Menambahkan konfigurasi multi-pilih tabel
• 2. Gunakan v-bind="$attrs" v-on="$listeners" untuk mentransplantasikan atribut asli el-table
• Untuk detail tentang cara menggunakannya, lihat ele-easy-table-demo

v1.1.4

• Komponen el-pagination menambahkan item konfigurasi asli

v1.1.5

• Tambahkan konten tajuk khusus

v1.1.6

• Optimalisasi kondisi tampilan nomor seri tabel

v1.1.7

• Menambahkan kotak input untuk mendukung memasukkan formulir permintaan kunci

v1.1.8

• Memperbaiki bug tampilan nomor seri tabel

v1.1.9

• Memperbaiki bug dalam menampilkan nomor seri tabel ketika tidak ada pembalikan halaman.

v1.2.0

• Kondisi kueri mendukung pelipatan

v1.2.1

• Kondisi kueri jenis slot mendukung konfigurasi apakah akan dilipat atau tidak

v1.2.2

• Acara handleClick tabel mendukung cakupan parameter kedua, yang dapat memperoleh data baris, kolom, $index, dan penyimpanan (manajemen status di dalam tabel).

v1.2.3

• Menambahkan acara handleExpand (acara panggilan balik setelah pelipatan bersyarat)

peristiwa	menjelaskan	parameter
menanganiPerluas	Acara panggilan balik setelah pelipatan bersyarat	adalah Perluas

• Tabel memiliki gaya inline baru overflow:visible; untuk mengimplementasikan tata letak lengket pada header tabel, cukup tambahkan gaya berikut

  Catatan: Jika ini adalah gaya tercakup, Anda perlu menggunakan operator >>> (lihat cakupan CSS dokumen untuk detailnya)

   /* 全局样式 */
  . el-table__header-wrapper {
    position : sticky;
    top : 0 ;
    z-index : 999 ;
  }
  /* scoped 局部样式 */
  . ele-easy-table-demo > > > . el-table__header-wrapper {
    position : sticky;
    top : 0 ;
    z-index : 999 ;
  }

  Lihat kode sumber demo untuk detailnya

  Catatan: Ini tidak dapat digunakan dengan fiksasi kolom secara bersamaan. Untuk menggunakannya secara bersamaan, Anda dapat menggunakan atribut tabel asli elemen untuk mengatur tinggi tabel.

v1.2.4

• Kondisi kueri mendukung konfigurasi placeholder

v1.2.5

• Acara khusus diberi nama menggunakan kebab-case. Untuk detailnya, lihat situs web resmi vuejs-nama acara khusus

v1.2.6

• el-form dan el-form-item mendukung item konfigurasi asli

v1.2.7

• Tombol kondisi kueri mendukung konfigurasi dinamis yang dinonaktifkan

v1.2.8

• Tombol kondisi kueri mendukung konfigurasi dinamis teks tampilan