vue jsx table
1.0.0
Contoh dokumentasi
Komponen ini didasarkan pada pengembangan sekunder tabel elemen dan didasarkan pada bisnis aktual. Komponen ini merangkum fungsi yang umum digunakan, menghasilkan tabel melalui konfigurasi, dan mengimplementasikan item perluasan header multi-level , fungsi header khusus , dll.
Element-ui perlu diperkenalkan ke dalam proyek sebelum digunakan
npm i vue - jsx - table
import 'vue-jsx-table/dist/vue-jsx-table.css'
import vueJsxTable from 'vue-jsx-table'
Vue . use ( vueJsxTable ) <!-- 引入样式 -->
< link
rel = "stylesheet"
href = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.css"
/>
< ! -- 引入组件库 -- >
< script src = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.umd.min.js" > </ script > Opsi kolom dan tableData diperlukan untuk konfigurasi tabel.
< vue-jsx-table
: columns = "columns"
: tableData = "tableData"
border
@ selection - change = "selectionChange"
: total = "100"
>
< / vue-jsx-table >
data() {
return {
columns : [
{
type : 'selection' ,
fixed : 'left' ,
selectable : this . rowSelectableHandle ,
} ,
{
label : '年龄' ,
prop : 'age' ,
width : 300 ,
sortable : true ,
} ,
{
label : '学校' ,
prop : 'school' ,
width : 200 ,
} ,
{
label : '学费' ,
prop : 'fee' ,
width : 200 ,
} ,
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} ,
] ,
tableData : [ ]
} ;
} ,Menyetel anak ke kolom dapat merender tajuk grup.
{
label : '多级表头' ,
children : [
{
label : '年级' ,
prop : 'grade' ,
width : 120 ,
} ,
{
label : '班级' ,
prop : 'class' ,
} ,
] ,
} , Tetapkan opsi render untuk kolom, Fungsi (baris, kolom, $index)
{
label : 'render' ,
prop : 'render' ,
width : 200 ,
render : ( row , column , $index ) => {
return (
< div onClick = { ( ) => this . cellClick ( row , column , $index ) } >
测试render
</ div >
) ;
} ,
} , Anda hanya perlu mengatur type:expand untuk item konfigurasi kolom. Konten yang diperluas dapat menggunakan slot atau render. Jika slot dan render dikonfigurasi secara bersamaan, slot akan diabaikan.
{
type : 'expand' ,
slot : 'expand' ,
} , Anda hanya perlu mengatur solt:'' untuk item konfigurasi kolom, dan slot adalah nama slotnya.
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} , Anda hanya perlu menyetel renderHeader untuk item konfigurasi kolom. renderHeader adalah konfigurasi asli elemen-ui (Secara resmi, tidak disarankan untuk menggunakan fungsi render-header pada kolom. Disarankan untuk menggunakan slot!! Akan ada prompt di konsol, memalukan). Anda juga dapat menggunakan slot dengan mengkonfigurasi item slotHeader Catatan bahwa nama slot tidak dapat diulang. Tentukan Konfigurasi slot telah ditentukan dalam deklarasi template
{
label : '自定义表头' ,
prop : 'name' ,
width : 120 ,
sortable : true ,
renderHeader : ( column , scope ) => {
console . log ( 'scope' , scope ) ;
return < span class = "cell-header-red-star" > { column . label } </ span > ;
} ,
} , {
label : '姓名' ,
prop : 'name' ,
slotHeader : 'slotHeader' ,
} ,
<!-- 插槽表头 -->
< template v-slot : slotHeader = "{ column }" >
<!-- {{ scope.column.label }} -->
< span >插槽表头： { { column . label } } </ span >
</ template > < vue-jsx-table
@ page-change = "pageChangeHandle"
: currentPage . sync = "paginationParams.pageNo"
: total = "100"
>
</ vue-jsx-table >
pageChangeHandle ( val ) {
this . paginationParams . pageNo = val . currentPage ;
this . paginationParams . pageSize = val . pageSize ;
} , Melalui slot solt, Anda juga dapat menggunakan fungsi render untuk merender komponen
< template v-slot : edit = "{ row }" >
< el-input v-model = "row.name" > </ el-input >
</ template >Semua Atribut Tabel diimplementasikan melalui v-bind="$attrs", Atribut Tabel tambahan:
| parameter | menjelaskan | jenis | nilai bawaan |
|---|---|---|---|
| kolom | kolom tabel | Himpunan | [] |
| kolomNamaKey | Kunci kolom. Jika Anda perlu menggunakan acara perubahan filter, Anda memerlukan atribut ini untuk mengidentifikasi kolom mana yang kondisi filternya (kunci kolom Atribut kolom Tabel) | rangkaian | - |
| meluruskan | Penyelarasan | Rangkaian | kiri |
| tampilkanPaginasi | Apakah akan menampilkan kontrol paging | Boolean | BENAR |
| Halaman saat ini | Halaman saat ini dari kontrol paging saat ini | Nomor | 1 |
| ukuran halaman | ukuran halaman kontrol paging | Himpunan | [10, 20, 30, 50] |
| Ukuran halaman | pageSize kontrol paging | Himpunan | [] |
| tata letak | tata letak kontrol paging | Rangkaian | 'ukuran, sebelumnya, pager, selanjutnya, total' |
| total | total kontrol paging | Nomor | 0 |
| paginationStyle | Gaya kontrol paging | Obyek | - |
| showOverflowTooltip | Tampilkan tooltip ketika konten terlalu panjang dan tersembunyi. Jika kolom tidak dikonfigurasi secara terpisah dengan showOverflowTooltip, gunakan atribut ini Defaultnya adalah true. | Boolean | BENAR |
| tampilkanPengaturan Tabel | Pengaturan tabel tampilan | Boolean | PALSU |
| sembunyikan Kolom | Nama kolom dan label yang perlu disembunyikan. Dalam beberapa skenario, kolom tersembunyi perlu ditampilkan berdasarkan kondisi tertentu. | Himpunan | [] |
| kelas khusus | Kelas gaya khusus | Himpunan | ['vue-jsx-pembungkus-tabel'] |
Semua Acara Tabel diimplementasikan melalui v-on="$listeners", Acara Tabel tambahan:
| parameter | menjelaskan | jenis | nilai bawaan |
|---|---|---|---|
| perubahan ukuran | Peristiwa ini akan dipicu oleh perubahan perubahan halaman dan perubahan saat ini. Ini ditambahkan untuk memfasilitasi perubahan paging. | Fungsi | 'fungsi({Ukuran halaman: 10,Halaman saat ini: 1,}) {}' |
| perubahan ukuran | Diaktifkan ketika ukuran halaman berubah | - | - |
| perubahan saat ini | Dipecat ketika Halaman saat ini berubah | - | - |
| parameter | menjelaskan | jenis | nilai bawaan |
|---|---|---|---|
| menopang | Nama bidang yang sesuai dengan konten kolom | rangkaian | - |
| celah | Nama slot kolom (perhatikan jika tabel disarangkan, nama slot tidak dapat diulang, cakupan slot ({ baris, $index })) | rangkaian | - |
| label | Judul yang ditampilkan | rangkaian | - |
| lebar | Lebar kolom yang sesuai | Nomor | - |
| showOverflowTooltip | Tampilkan keterangan alat ketika konten terlalu panjang dan tersembunyi | Boolean | - |
| tetap | Apakah kolom tersebut dipasang di kiri atau kanan (benar, kiri, kanan), true berarti dipasang di kiri | string, boolean | - |
| memberikan | fungsi rendering jsx | fungsi | render(baris, kolom, $indeks) |
| jenis | seleksi/indeks/perluas | rangkaian | - |
| renderHeader | Fungsi yang digunakan untuk header tabel, judul kolom, rendering area Label | Fungsi (kolom, cakupan }), kolom adalah item konfigurasi, dan cakupan adalah cakupan komponen asli. (Atribut ini bukan parameter asli) | - |
| selredstar | Apakah akan memberi tanda bintang merah sebelum teks header | Boolean | PALSU |
| dapat diurutkan | Apakah kolom terkait dapat diurutkan. Jika disetel ke 'kustom', artinya pengguna ingin mengurutkan dari jarak jauh dan perlu mendengarkan peristiwa perubahan pengurutan pada Tabel. | boolean, string (benar, salah, 'adat') | PALSU |
| pemformat | Digunakan untuk memformat konten (atribut asli elemen-ui) | Fungsi (baris, kolom, cellValue, indeks) | - |
| dapat dipilih | Ini hanya berlaku untuk kolom dengan tipe = pilihan. Tipenya adalah Fungsi. Nilai kembalian Fungsi digunakan untuk menentukan apakah Kotak Centang pada baris ini dapat dicentang. | Fungsi (baris, indeks) | - |
| showHeaderTooltip | Apakah informasi perintah penyalinan ditampilkan saat mouse digerakkan ke header tabel | Boolean | - |
| headerTooltipTeks | Header menampilkan konten informasi salinan | Rangkaian | - |
