vue willtable
1.0.0
dokumen bahasa Inggris
Komponen tabel yang dapat diedit cocok untuk Vue, mendukung beberapa operasi tombol pintas, dan mensimulasikan pengalaman pengoperasian Excel
Demo di sini: https://demo.willwuwei.com/willtable/
Sistem formulir berbagi dan pengeditan real-time multi-orang yang diterapkan berdasarkan komponen ini:
Kunjungi URL
Alamat proyek front-end
Alamat proyek backend
npm install vue-willtable --save
import Vue from 'vue'
import VueWilltable from 'vue-willtable'
// require styles
import 'vue-willtable/dist/vue-willtable.min.css'
Vue . component ( 'VueWilltable' , VueWilltable ) import VueWilltable from 'vue-willtable'
// require styles
import 'vue-willtable/dist/vue-willtable.min.css'
export default {
components : {
VueWilltable
}
} < template >
< willtable
ref = " willtable "
:columns = " columns "
v-model = " data "
maxHeight = " 800 " />
</ template >
< script >
export default {
data () {
return {
columns : [
{
type : ' selection ' ,
width : 40 ,
fixed : true ,
},
{
title : '序号' ,
key : ' sid ' ,
fixed : true ,
type : ' number ' ,
width : 100 ,
},
{
title : '姓名' ,
key : ' name ' ,
fixed : true ,
width : 120 ,
},
{
title : '日期' ,
key : ' date ' ,
type : ' date ' ,
width : 100 ,
},
{
title : '工作岗位' ,
key : ' email ' ,
width : 300 ,
type : ' select ' ,
options : [
{
value : ' Web前端开发' ,
label : ' Web前端开发' ,
},
{
value : ' Java开发' ,
label : ' Java开发' ,
},
{
value : ' Python开发' ,
label : ' Python开发' ,
},
{
value : ' Php开发' ,
label : ' Php开发' ,
},
],
},
{
title : '月份' ,
key : ' month ' ,
type : ' month ' ,
width : 100 ,
},
{
title : '地址' ,
key : ' address ' ,
width : 200 ,
},
{
title : '标题' ,
key : ' title ' ,
width : 300 ,
},
{
title : '内容' ,
key : ' paragraph ' ,
width : 300 ,
},
{
title : '链接' ,
key : ' url ' ,
width : 200 ,
},
{
title : ' ip ' ,
key : ' ip ' ,
width : 200 ,
validate : ( value ) => {
const pattern = / ((2(5 [ 0-5 ] | [ 0-4 ] d )) | [ 0-1 ] ? d {1,2} )( . ((2(5 [ 0-5 ] | [ 0-4 ] d )) | [ 0-1 ] ? d {1,2} )) {3} / g ;
return pattern . test (value);
},
},
{
title : '总金额' ,
key : ' sum ' ,
width : 200 ,
},
{
title : ' ID ' ,
key : ' id ' ,
width : 200 ,
},
{
title : '色值' ,
key : ' color ' ,
width : 200 ,
},
],
data : [],
},
},
mounted () {
this . getData ();
},
methods : {
getData () {
const data = [];
this . $refs . willtable . setData (data);
},
},
};
</ script >this.$refs.willtable memanggil metode setData untuk memperbarui seluruh data tabel dan mengatur ulang catatan data historis.
this.$refs.willtable memanggil metode getData untuk mendapatkan seluruh data tabel.
v-model mengikat nilai
| parameter | menjelaskan | jenis | Nilai opsional | nilai bawaan |
|---|---|---|---|---|
| kolom | Deskripsi konfigurasi kolom tabel | Himpunan | —— | [] |
| tinggi maksimal | tinggi maksimum meja | string/angka | —— | —— |
| barisTinggi | tinggi setiap baris | string/angka | —— | —— |
| dengan disabilitas | Pengeditan dilarang | Boolean | —— | BENAR |
| tampilkanIkon | Tampilkan ikon tipe header | Boolean | —— | PALSU |
| gaya sel | Metode panggilan balik gaya sel | Fungsi({baris, kolom, indeks baris, indeks kolom}) | —— | —— |
| namakelas sel | Metode panggilan balik dari className sel | Fungsi({baris, kolom, indeks baris, indeks kolom}) | —— | —— |
| dinonaktifkanSel | Nonaktifkan sel | Fungsi({baris, kolom, indeks baris, indeks kolom}) => Boolean | —— | () => salah |
| tampilkanAddRow | Tampilkan fungsi tambah baris | Boolean | —— | PALSU |
| tambahkanRowAndCopy | Salin baris data sebelumnya saat menambahkan baris | Boolean | —— | PALSU |
| nama acara | menjelaskan | parameter panggilan balik |
|---|---|---|
| perubahan seleksi | Peristiwa ini dipicu ketika pilihan berubah | pilihan |
| nama metode | menjelaskan | parameter |
|---|---|---|
| dapatkanData | Digunakan untuk mendapatkan data dan mengembalikan data tabel saat ini | —— |
| setData | Digunakan untuk mengatur data dan mengatur ulang riwayat | data |
| dapatkan PerubahanData | Dapatkan perubahan baris data | —— |
| getErrorRows | Dapatkan data dan indeks dengan kesalahan verifikasi | —— |
| tambahkanItem | Tambahkan deretan data di bagian bawah | barang |
| tambahkan baris | Tambahkan baris | indeks baris, copyRow, Data khusus |
| hapusItem | Untuk penghapusan batch, kunci parameter adalah atribut identifikasi unik dari setiap baris seperti id, dan nilai adalah array atribut identifikasi. | kunci, nilai |
| setCellData | Tetapkan data sel | indeks baris, indeks kolom, nilai |
| layar penuh | Tampilan layar penuh | —— |
| keluar dari Layar Penuh | Keluar dari layar penuh | —— |
| parameter | menjelaskan | jenis | Nilai opsional | nilai bawaan |
|---|---|---|---|---|
| kunci | Nama bidang yang sesuai dengan konten kolom | Rangkaian | —— | —— |
| judul | Teks tampilan header kolom | Rangkaian | —— | —— |
| lebar | lebar kolom | Tali/Nomor | —— | —— |
| jenis | Jenis kolom | Rangkaian | pilihan/nomor/tanggal/pilih/bulan | —— |
| format | Format tanda seribu (untuk tipe angka) | Boolean | —— | BENAR |
| pilihan | pilih opsi tarik-turun | Himpunan | { nilai: 'nilai', label: 'teks tampilan' } | —— |
| tetap | Apakah sudah terpasang di sisi kiri? | Boolean | —— | PALSU |
| tindakan | Apakah akan mengaktifkan pemfilteran dan pengurutan | Boolean | —— | PALSU |
| dengan disabilitas | Apakah akan melarang pengeditan | Boolean | —— | PALSU |
| tidak ada verifikasi | Apakah akan menonaktifkan verifikasi | Boolean | —— | PALSU |
| mengesahkan | Verifikasi khusus | Fungsi (nilai) | —— | —— |
| masukan khusus | masukan khusus | Fungsi({ baris, kolom, indeks baris, indeks kolom, nilai }) | —— | —— |
| tombol pintas | menjelaskan |
|---|---|
| Tombol panah | Pindahkan kotak edit |
| Ctrl + C | Pasta |
| Ctrl+V | menyalin |
| Ctrl+A | Pilih semua sel |
| Ctrl+Z | Membatalkan |
| Ctrl+Y | mengulangi |
| Memasuki | Pengeditan sel/Selesaikan pengeditan sel |
| Hapus, Backspace | menghapus |
WillWu
