el table plus

el-tabel-plus

Komponen yang dapat dikonfigurasi berdasarkan el-table

Latar Belakang: Saat menggunakan elemen el-table, terlalu banyak kode template yang harus ditulis, sehingga mengakibatkan terlalu banyak kode HTML pada halaman. Melihat pustaka komponen elemen dari lapisan aplikasi, meskipun desain API sangat fleksibel, namun sangat rumit untuk digunakan. Oleh karena itu, el-table perlu dikemas untuk menyederhanakan konfigurasi terkait.

Desain API lapisan aplikasi relatif bagus. Kami merekomendasikan tabel antd-design-vue. Desain API el-table-plus mengacu pada komponen tabel antd-design-vue. Pada saat yang sama, semua atribut/peristiwa mendukung komponen tabel elemen asli, yang tidak akan merusak api asli (tidak ada intrusi); ia juga mendukung fungsi slot/jsx/h untuk menyesuaikan rendering data kolom dalam tiga cara untuk mencapai kustom rendering logika bisnis; itu juga terintegrasi Komponen pagination yang umum digunakan dan API yang diperluas membantu menangani bisnis umum dengan mudah.

Kasus daring

https://lq782655835.github.io/el-table-plus

Fitur

1. Penggunaan sederhana, hanya diperlukan dua data atribut dan kolom untuk mendukung
2. Warisan penuh, warisan atribut/peristiwa lengkap elemen-ui
3. Sangat skalabel, mendukung fungsi slot/jsx/h untuk menyesuaikan data kolom rendering dalam tiga cara
4. Lebih nyaman, perluas acara gulir, komponen penomoran halaman, dan pemformatan cepat

Instalasi dan pengenalan

Memasang

yarn add @springleo/el-table-plus

memperkenalkan

Komponen ini bergantung pada komponen el-table dari elemen-ui dan perlu diperkenalkan sendiri.

 import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;
Vue . use ( ElementUI ) ;

import ElTablePlus from '@springleo/el-table-plus'
Vue . use ( ElTablePlus ) 

Penggunaan dasar

 < template >
    < el-table-plus
      :data =" list "
      :columns =" [
        { label: 'ID', value: 'id', width: '80px' },
        { label: '存储卷名', value: 'name' },
        { label: '总容量', value: 'storage', fn: val => `${val}G` },
        { label: '创建人', value: 'member.userId' },
        { label: '邮箱', value: 'member.email' },
        { label: '创建时间', value: 'gmtCreate' }
      ] "
    />
</ template > 

API

atribut el-tabel-plus

Mendukung semua atribut asli di el-table dan memperluas API berikut.

parameter	jenis	nilai bawaan	menjelaskan
memuat	Boolean	PALSU	Memuat animasi
data	Himpunan	[]	Daftar data
kolom	Himpunan	[]	Daftar konfigurasi item kolom, lihat kolom Attrs di bawah untuk detailnya
penomoran halaman	Obyek		Konfigurasi pembalik halaman, tidak disetel secara default, pembalik halaman tidak akan ditampilkan. API terkait dapat ditemukan di el-pagination
total	Nomor	0	Jumlah total pembalik halaman

acara el-table-plus

Mendukung semua acara asli di el-table dan memperluas API berikut.

nama acara	menjelaskan	Keterangan
menggulir	acara bilah gulir tabel	e
perubahan halaman	Acara pergantian pembalik halaman	{ Ukuran halaman, Halaman saat ini }

atribut kolom

Mendukung semua atribut asli dan Scoped Slot dari el-table-column, dan memperluas API berikut:

Atraksi	Jenis	Bawaan	Keterangan
label	Rangkaian		Nama kolom
menopang	Rangkaian		Bidang data kolom mendukung penyusunan objek multi-level, seperti user.email.prefix
tersembunyi	Boolean		Apakah akan menyembunyikan kolom ini. Sarannya adalah saran yang dihitung yang memungkinkan tampilan dan penyembunyian responsif.
customRender	Fungsi		Render data kolom khusus. Parameter fungsi (nilai, baris, kolom, $index, h), mendukung fungsi jsx dan h
Judul khusus	Fungsi		Render header kolom khusus. Parameter fungsi (kolom, $index, h), mendukung fungsi jsx dan h
scopedSlots	Obyek		Gunakan mode slot untuk menyesuaikan rendering dan mengganti fungsi customRender/customTitle. Misalnya: { customRender: 'slotName1', customTitle: 'slotName2' }

Seri plugin Vue

Pengaya	Status	Keterangan
@springleo/el-dialog-helper		Menjanjikan dialog di Vue!
@springleo/el-table-plus		Komponen yang dapat dikonfigurasi berdasarkan el-table
@springleo/el-form-plus		formulir skema berdasarkan formulir elemen-ui
@springleo/virtual-scroll-table		Komponen tabel gulir virtual tarik-turun tak terbatas

Lisensi

MIT