el-tree-fransfer adalah komponen kotak antar-jemput pohon berdasarkan VUE dan elemen-ui. Harap pastikan Anda telah memperkenalkan elemen-ui sebelum menggunakannya! Fungsi komponen ini mirip dengan komponen transfer element-ui , namun data di dalamnya berupa struktur pohon! Faktanya, komponen elemen-ui yang diandalkan oleh el-tree-transfer adalah Kotak Centang, Tombol, dan kontrol pohon Pohon utama! Ini bukan perpanjangan dari komponen shuttle box elemen-ui, tetapi hanya mengacu pada tampilan, gaya, dan fungsinya.
Karena bisnis perusahaan menggunakan kerangka Vue, perpustakaan UI menggunakan elemen-ui. Sulit untuk menemukan komponen shuttle box Vue tree yang berguna di pasaran, dan kami tidak ingin memperkenalkan plug-in kelas berat lainnya di luar elemen-ui hanya karena shuttle box, jadi ada el-tree-transfer. Ringan, mudah digunakan, tidak memerlukan biaya pembelajaran tambahan.
2.4.6 Memperbaiki kesalahan rekonstruksi (jangan gunakan 2.4.0-2.4.5); tambahkan tiga mode yang tidak terkait dengan ayah dan anak (termasuk mode otorisasi); sesuaikan struktur direktori komponen; pengujian kasar data demo sangat meningkat. ;Optimalkan pemilihan semua ketika orang tua dan anak tidak terkait; Acara addBtn adalah add-btn, dan deleteBtn adalah delete-btn; tambahkan drag dan drop; tambahkan slot node khusus; perbaiki data yang hilang setelah memilih shuttle kiri dan kanan dua kali secara bersamaan; fungsi antar-jemput orang tua-anak yang tidak terkait
2.3.3 Ubah logika pencocokan shuttle; tambahkan parameter rootPidValue. Lihat catatan rilis di bawah untuk petunjuk rinci
Npm pertama unduh pluginnya
npm install el-tree-transfer --save
atau
npm i el-tree-transfer -S
Kemudian Anda dapat menggunakan el-tree-transfer seperti komponen biasa
< template >
< div >
// 你的代码
...
// 使用树形穿梭框组件
< tree-transfer : title = " title " :from_data='fromData' :to_data='toData' :defaultProps=" { label: 'label' } " @add-btn='add' @remove-btn='remove' :mode='mode' height='540px' filter openAll>
</ tree - transfer >
< / div >
</ template >
< script >
import treeTransfer from 'el-tree-transfer' // 引入
export defult {
data ( ) {
return : {
mode : "transfer" , // transfer addressList
fromData : [
{
id : "1" ,
pid : 0 ,
label : "一级 1" ,
children : [
{
id : "1-1" ,
pid : "1" ,
label : "二级 1-1" ,
disabled : true ,
children : [ ]
} ,
{
id : "1-2" ,
pid : "1" ,
label : "二级 1-2" ,
children : [
{
id : "1-2-1" ,
pid : "1-2" ,
children : [ ] ,
label : "二级 1-2-1"
} ,
{
id : "1-2-2" ,
pid : "1-2" ,
children : [ ] ,
label : "二级 1-2-2"
}
]
}
]
} ,
] ,
toData : [ ]
}
} ,
methods: {
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
changeMode ( ) {
if ( this . mode == "transfer" ) {
this . mode = "addressList" ;
} else {
this . mode = "transfer" ;
}
} ,
// 监听穿梭框组件添加
add ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时,返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时,返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
} ,
// 监听穿梭框组件移除
remove ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时,返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时,返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
}
} ,
components : { treeTransfer } // 注册
}
</ script >
< style >
...
</ style > | nomor seri | parameter | menjelaskan | jenis | nilai bawaan | Mengisi kembali |
|---|---|---|---|---|---|
| 1 | lebar | lebar | Rangkaian | 100% | Disarankan untuk mengatur lebar dan posisi kotak luar |
| 2 | tinggi | tinggi | Rangkaian | 320 piksel | - |
| 3 | judul | judul | Rangkaian | ["daftar sumber", "daftar target"] | - |
| 4 | tombol_teks | nama tombol | Himpunan | - | - |
| 5 | dari_data | sumber data | Himpunan | - | Format datanya sama dengan komponen pohon elemen-ui, tetapi harus memiliki id dan pid |
| 6 | ke_data | data sasaran | Himpunan | - | Format datanya sama dengan komponen pohon elemen-ui, tetapi harus memiliki id dan pid |
| 7 | alat peraga default | Item konfigurasi - sama seperti props di el-tree | Obyek | { label: "label", anak-anak: "anak-anak", isLeaf: "daun", nonaktifkan: "nonaktifkan" } | Pemakaiannya sama dengan props el-tree |
| 8 | simpul_kunci | Sesuaikan nilai node-key, defaultnya adalah id | Rangkaian | PENGENAL | Itu harus konsisten dengan nama parameter id di data treedata dan harus unik. |
| 9 | pid | Sesuaikan nama parameter pid, defaultnya adalah "pid" | Rangkaian | pid | Beberapa netizen menyarankan agar nama bidang yang diberikan oleh latar belakang tidak disebut pid, sehingga dukungan khusus ditambahkan. |
| 10 | hanya daun | ditinggalkan | - | - | - |
| 11 | menyaring | Apakah akan mengaktifkan fungsi pemfilteran | Boolean | PALSU | Filter berdasarkan bidang label pada parameter defaultProps |
| 12 | bukaSemua | Apakah akan memperluas semuanya secara default | Boolean | PALSU | Ada masalah kinerja |
| 13 | Node pohon khusus, penggunaannya sama dengan pohon elemen-ui | Fungsi | - | Versi 2.2.3 dibagi menjadi dua fungsi untuk menentukan node khusus di sisi kiri dan kanan. | |
| 14 | mode | Atur mode kotak antar-jemput | Rangkaian | transfer | Mode defaultnya adalah mode transfer, yaitu mode antar-jemput pohon. Bidang yang dapat dikonfigurasi adalah Daftar Alamat dan dapat diubah ke mode buku alamat. Dalam mode buku alamat, nama tombol tidak dapat dikustomisasi , cukup masukkan empat nilai dalam array judul. , dalam mode AddressList, judul default adalah buku alamat, penerima, orang yang menyalin, dan orang yang menyalin karbon. |
| 15 | transferOpenNode | Apakah akan memperluas node antar-jemput setelah antar-jemput | Boolean | BENAR | Defaultnya adalah true, yang berarti bahwa shuttle node akan diperluas untuk inspeksi visual. Parameter ini ditambahkan karena akan ada masalah lag yang jelas dalam ekspansi ketika jumlah datanya besar. Namun, perhatikan jika parameter ini disetel ke false , itu tidak akan diperluas setelah antar-jemput. Lagi pula, tidak mungkin untuk menentukan lapisan mana yang berisi data yang sangat besar |
| 16 | defaultCheckedKeys | Node dipilih secara default | Himpunan | PALSU | Hanya cocok dengan node default awal dan tidak akan mengubah node default secara dinamis setelah Anda mengoperasikannya. |
| 17 | pengganti | Atur perintah kotak pencarian | Rangkaian | Masukkan kata kunci untuk difilter | - |
| 18 | Transfer default | Apakah akan melakukan shuttle secara otomatis satu kali ke node dengan defaultCheckedKeys dipilih secara default | Boolean | PALSU | Digunakan untuk memenuhi kebutuhan pengguna yang tidak ingin membagi data menjadi fromData dan toData. |
| 19 | arrayToTree | Apakah akan mengaktifkan konversi array satu dimensi menjadi struktur pohon | Boolean | PALSU | Data harus memiliki node root dan tidak rusak. Untuk detail tentang format data, lihat app.vue di github. Menurut hubungan yang sesuai antara id dan pid, ada masalah kinerja tertentu saat mengonversi. |
| 20 | alamatPilihan | Item konfigurasi mode buku alamat | Obyek | {num: Angka, akhiran: String, konektor: String} | num-> Jumlah buku alamat yang diperlukan di sisi kanan, defaultnya adalah 3 akhiran-> Bidang yang ingin Anda sambung setelah label (seperti id, yaitu ambil id data ini dan gabungkan di belakang ). Defaultnya adalah sufiks konektor -> konektor (string) default-). |
| dua puluh satu | malas | Apakah akan mengaktifkan pemuatan lambat | Boolean | PALSU | Efeknya adalah el-tree lag memuat dan tidak dapat digunakan bersamaan dengan openAll atau ekspansi default. |
| dua puluh dua | malasFn | Fungsi panggilan balik pemuatan lambat | Fungsi | - | Ketika malas digunakan, fungsi panggilan balik harus diteruskan, contoh: malasFn='loadNode', mengembalikan parameter loadNode(node, resolusi, dari), node->node yang saat ini diperluas, resolusi->resolusi pemuatan lambat, dari -> kiri/kanan Menunjukkan bahwa panggilan balik datang dari sisi kiri/kanan |
| dua puluh tiga | menyorot | Apakah akan menyorot node yang dipilih saat ini | Boolean | PALSU | - |
| dua puluh empat | filterNode | Fungsi pencarian khusus | Fungsi | - | Jika tidak lolos, default akan tetap difilter berdasarkan bidang label pada parameter defaultProps. |
| 25 | defaultExpandedKeys | Perluas node secara default | Himpunan | - | Array id node yang akan diperluas akan secara otomatis dihapus duplikatnya di sisi kiri dan kanan. |
| 26 | malas, Benar | Di versi 2.2.9, atribut malas hanya berlaku di sisi kiri pohon. Jika Anda memerlukan sisi kanan, gunakan pemuatan lambat -> malasKanan. | Boolean | - | - |
| 27 | sjr | Mode buku alamat, atur data penerima di sebelah kanan | Himpunan | - | - |
| 28 | csr | Mode buku alamat, atur salinan data orang di sebelah kanan | Himpunan | - | - |
| 29 | Tuan | Mode buku alamat, atur data orang salinan buta di sebelah kanan | Himpunan | - | - |
| 30 | rootPidValue | Mode kotak antar-jemput, nilai pid data simpul akar, digunakan untuk mencocokkan loop keluar, penting | Tali, Nomor | 0 | - |
| 31 | periksa dengan ketat | Apakah ayah dan anak tidak berhubungan | Boolean | PALSU | Mode ini tidak mendukung pemalas. FromData dan toData yang dikembalikan adalah data terbaru, dan kunci serta node di obj tidak lengkap. Dan terdapat perbedaan logika pemrosesan untuk sisi kiri dan kanan node induk setelah menghapus node anak: karena akan muncul di sebelah kanan saat otorisasi, node induk kiri harus diperlukan, dan saat menghapus otorisasi, hapus node anak izin tidak berarti Anda ingin menghapus izin induk. |
| 32 | renderAfterExpand | Apakah akan merender node anak setelah node pohon diperluas untuk pertama kalinya | Boolean | BENAR | - |
| 33 | perluasOnClickNode | Apakah akan memperluas atau memperkecil node saat mengkliknya | Boolean | BENAR | - |
| 34 | periksaOnClickNode | Apakah akan memilih node saat mengkliknya | Boolean | PALSU | - |
| 35 | indentasi | Indentasi horizontal antara node level yang berdekatan, dalam piksel | Nomor | 16 | - |
| 36 | kelas ikon | Sesuaikan ikon untuk simpul pohon | Rangkaian | - | - |
| 37 | dapat diseret | Apakah akan mengaktifkan fungsi simpul seret dan lepas | Boolean | PALSU | - |
| 38 | izinkan-seret | Tentukan apakah node dapat diseret | Fungsi (simpul) | - | - |
| 39 | izinkan-jatuhkan | Tentukan apakah node target dapat ditempatkan saat menyeret | Fungsi (draggingNode, dropNode, ketik) | - | Parameter tipe memiliki tiga situasi: 'prev', 'inner' dan 'next', yang masing-masing berarti menempatkan sebelum node target, memasukkan ke dalam node target, dan menempatkan setelah node target. |
| 40 | periksaStrictlyType | Ada tiga mode yang tidak terkait dengan ayah dan anak: mode otorisasi, mode boneka, dan mode blok penyusun modular. | Rangkaian | otorisasi: Memilih simpul anak di sebelah kiri akan secara otomatis membawa simpul induk; memilih simpul induk di sebelah kanan akan secara otomatis membawa simpul anak; simpul non-daun yang sama mungkin ada di kedua sisi boneka ini: Orang tua murni- antar-jemput anak tidak terkait, tetapi pohon lengkap harus dipertahankan bentuk strukturnya, secara otomatis hanya membawa bagian-bagian yang diperlukan untuk antar-jemput ke sisi yang berlawanan untuk penyambungan. Struktur kerangka; node non-daun yang sama mungkin ada di kedua sisi mode ini; orangtua-anak murni modular tidak mengaitkan antar-jemput, dan tidak mempertahankan struktur pohon yang lengkap, untuk membentuk bentuk pohon di sisi kanan , sisi kiri perlu dibongkar, dan sisi kiri perlu dibongkar. Semakin banyak di sisi kanan, semakin lengkap struktur pohonnya; sisi kiri dan kanan pola ini memastikan keunikan yang ketat |
| nomor seri | nama acara | menjelaskan | parameter panggilan balik |
|---|---|---|---|
| 1 | tambahkan-btn | Acara dipicu ketika tombol tambah diklik (addBtn sebelum 2.4.0) | function(fromData,toData,obj), mode transfer kotak antar-jemput pohon adalah 1. Data kiri setelah pergerakan, 2. Data kanan setelah pergerakan, 3. Kunci node yang dipindahkan, node, halfKeys, objek halfNodes; parameter pengembalian adalah daftar penerima yang tepat, daftar salinan kanan, dan daftar salinan buta kanan. |
| 2 | hapus-btn | Peristiwa dipicu ketika tombol hapus diklik (removeBtn sebelum 2.4.0) | function(fromData,toData,obj), mode transfer kotak antar-jemput pohon adalah 1. Data kiri setelah pergerakan, 2. Data kanan setelah pergerakan, 3. Kunci node yang dipindahkan, node, halfKeys, objek halfNodes; parameter pengembalian adalah daftar penerima yang tepat, daftar salinan kanan, dan daftar salinan buta kanan. |
| 3 | kiri-periksa-perubahan | Acara pemeriksaan data sumber kiri | function(nodeObj, treeObj, checkAll) lihat nilai pengembalian peristiwa pemeriksaan komponen el-tree, parameter checkAll baru menunjukkan apakah semua dipilih |
| 4 | periksa-kanan-perubahan | Acara pengecekan data sasaran tepat | function(nodeObj, treeObj, checkAll) lihat nilai pengembalian peristiwa pemeriksaan komponen el-tree, parameter checkAll baru menunjukkan apakah semua dipilih |
| 5 | simpul-seret-mulai | Peristiwa dipicu ketika sebuah node mulai menyeret | Ada total 3 parameter, secara berurutan: "kiri"/"kanan", Node yang sesuai dengan node yang diseret, dan peristiwa |
| 6 | simpul-seret-masuk | Peristiwa dipicu saat menyeret ke node lain | Ada total 4 parameter, secara berurutan: "kiri"/"kanan", Node yang sesuai dengan node yang diseret, Node yang sesuai dengan node yang dimasukkan, dan peristiwa |
| 7 | simpul-seret-keluar | Peristiwa dipicu ketika menyeret keluar dari sebuah node | Ada total 4 parameter, secara berurutan: "kiri"/"kanan", Node yang berhubungan dengan node yang diseret, Node yang berhubungan dengan node kiri, dan event |
| 8 | simpul-seret-over | Sebuah event dipicu ketika sebuah node diseret (mirip dengan event mouseover browser) | Ada total 4 parameter, secara berurutan: "kiri"/"kanan", Node yang sesuai dengan node yang diseret, Node yang sesuai dengan node yang dimasukkan saat ini, dan peristiwa |
| 9 | simpul-seret-akhir | Acara dipicu ketika drag berakhir (mungkin tidak berhasil) | Total ada 5 parameter, secara berurutan: "kiri"/"kanan", Node yang sesuai dengan node yang diseret, node terakhir yang dimasukkan saat drag berakhir (mungkin kosong), posisi penempatan node yang diseret (sebelumnya , setelah, dalam), acara |
| 10 | simpul-jatuhkan | Acara dipicu ketika menyeret berhasil diselesaikan | Total ada 5 parameter, secara berurutan: "kiri"/"kanan", Node yang sesuai dengan node yang diseret, node terakhir yang dimasukkan saat drag berakhir, posisi penempatan node yang diseret (sebelum, sesudah, dalam) , peristiwa |
| nomor seri | nama | menjelaskan |
|---|---|---|
| 1 | jelasDiperiksa | Hapus node yang dipilih, hapus semua secara default type:string left左边right右边all全部默认all |
| 2 | dapatkan Diperiksa | Dapatkan data yang dipilih |
| 3 | setDiperiksa | Atur fungsi data yang dipilih (leftKeys = [], rightKeys = []) |
| 4 | filter jelas | Hapus kondisi kotak pencarian, hapus semua fungsi secara default (ketik: String) kiri, kiri, kanan, semua, default semua |
| nomor seri | nama | menjelaskan |
|---|---|---|
| 1 | kaki kiri | Slot bawah kiri dan kanan shuttle box |
| 2 | kaki kanan | Slot bawah kiri dan kanan shuttle box |
| 3 | judul-kiri | Konten khusus di sisi kiri dan kanan area judul kotak antar-jemput |
| 4 | judul-kanan | Konten khusus di sisi kiri dan kanan area judul kotak antar-jemput |
| 5 | membentuk | Slot atas di area konten kiri |
| 6 | ke | Slot atas area konten di sebelah kanan |
| 7 | konten-kiri | Sesuaikan simpul pohon kiri |
| 8 | konten-kanan | Sesuaikan simpul pohon yang tepat |
2.4.6 Memperbaiki kesalahan rekonstruksi (jangan gunakan 2.4.0-2.4.5); tambahkan tiga mode yang tidak terkait dengan ayah dan anak (termasuk mode otorisasi); sesuaikan struktur direktori komponen; pengujian kasar data demo sangat meningkat. ;Optimalkan pemilihan semua ketika orang tua dan anak tidak terkait; Acara addBtn adalah add-btn, dan deleteBtn adalah delete-btn; tambahkan drag dan drop; tambahkan slot node khusus; perbaiki data yang hilang setelah memilih shuttle kiri dan kanan dua kali secara bersamaan; fungsi antar-jemput orang tua-anak yang tidak terkait
2.3.3 Ubah algoritme untuk menilai apakah target shuttle sudah ada di sisi yang berlawanan untuk menghindari hasil pencocokan yang tidak diharapkan dari ekspresi reguler str asli (misalnya, bidang anak dan daftar memiliki id ini. Setelah shuttle dihapus, maka shuttle akan dihapus. data di anak-anak hilang, dan data dalam daftar hilang. Data masih ada, saat ini logika pencocokan asli masih
rootPidValuemengabaikan shuttle ketika target tugas sudah ada di sisi yang berlawanan); tidak lagi memaksa pid dari node root diubah menjadi 0
2.3.2 Optimalkan mode buku alamat
2.3.1 Pindahkan pengaturan css lapisan luar untuk el-tree ke lapisan dalam untuk menghilangkan dampak pembatalan cakupan css di 2.3.0
2.3.0 Batalkan cakupan css
Di versi 2.2.9, atribut malas hanya berlaku di sisi kiri pohon. Jika Anda memerlukan sisi kanan, gunakan pemuatan lambat -> malasKanan.
2.2.8 Mengoptimalkan penggunaan defaultCheckedKeys dan defaultTransfer secara bersamaan, yang memicu masalah penambahan peristiwa. Biasanya shuttle pertama default adalah latar belakangnya malas dan tidak menghasilkan dua data fromData dan toData Saat ini, peristiwa penambahan perlu dipicu lagi. ; Alternatifnya, alih-alih menggunakan defaultTransfer, Anda dapat memanggil fungsi addToAims(false) secara manual setelah defaultCheckedKeys berubah terpicu.
2.2.6 Tambahkan metode
clearCheckeduntuk menghapus node yang dipilih
2.2.5 Tambahkan parameter
defaultExpandedKeysuntuk memperluas node secara default
2.2.3 Pisahkan
参数13 renderContentadalahrenderContentLeft,renderContentRightmasing-masing menentukan fungsi simpul khusus di sisi kiri dan kanan; tambahkan fungsifilterNodeuntuk menyesuaikan pencarian
2.2.2 Tambahkan parameter penyorotan yang dipilih
2.2.1 Tambahkan pilih semua acara di judul. Untuk deskripsi parameter rinci, lihat
事件3,事件4
2.2.0 Menambahkan fungsi pemuatan lambat (mode buku non-alamat). Untuk deskripsi parameter terperinci, lihat
参数21, 参数22
2.1.2 Menambahkan item yang dapat dikonfigurasi untuk mode buku alamat, tetapi sebagai mode pemeliharaan non-utama, fleksibilitasnya masih rendah. Untuk penjelasan parameter rinci, lihat
参数20
2.1.1 Memperbaiki kesalahan shuttle saat memilih node root dalam mode array, membuang parameter
leafOnly, dan berhati-hati untuk tidak menggunakan parameter arrayToTree jika sudah menjadi struktur pohon.
2.1.0 Menambahkan parameter arrayTotree untuk secara otomatis mengubah array satu dimensi menjadi struktur pohon yang diperlukan (lihat parameter 19, atau github-app.vue untuk detailnya); memperbaiki masalah sisa node yang setengah dipilih setelah antar-jemput; variabel
2.0.2 Tambahkan area konten khusus slot header judul
2.0.1 Memperbaiki masalah pemutusan hubungan orang tua-anak.
Versi 2.0.0 menambahkan peristiwa pemeriksaan data di sisi kiri dan kanan kotak antar-jemput, dan slot bawah di sisi kiri dan kanan kotak antar-jemput.
Versi 1.9.8 memperbaiki pelaporan kesalahan tombol kustom
button_text.
Versi 1.9.7 menambahkan atribut
defaultTransferuntuk memenuhi kebutuhan pengguna yang tidak ingin membagi data menjadi fromData dan toData, serta menambahkan atributplaceholder.
1.9.0 Meningkatkan kekuatan pencocokan reguler ketika id berisi angka dan karakter.
Versi 1.8.9 memperbaiki kesalahan duplikasi yang disebabkan oleh shuttle ketika sebuah node merupakan node cabang di satu sisi dan node daun di sisi lain! Mengatasi kesalahan filter yang tidak valid saat menyesuaikan nama node.
Versi 1.8.8 menambahkan parameter
transferOpenNodeuntuk mengatur apakah akan memperluas node setelah shuttle, dandefaultCheckedKeysdigunakan untuk mengatur perluasan default awal node.
Versi 1.8.7 menambahkan mode buku alamat,
addressListdapat dikonfigurasi melalui kolom mode. Nilai opsional dari kolom mode adalahtransfer|.
Versi 1.7.7 menyesuaikan parameter peristiwa
addBtndanremoveBtn, mengembalikan tiga parameter. Parameter pertama adalah data yang dipindahkan dari Data, parameter kedua adalah data yang dipindahkan ke Data, dan parameter ketiga adalah objek {keys, node, harfKeys, harfNodes} . Menambahkan parameterrenderContentuntuk mendukung penyesuaian simpul pohon.
Versi 1.6.7 menambahkan
filter,openAlluntuk mengatur apakah akan mengaktifkan pemfilteran dan apakah akan memperluas semuanya secara default.
Versi 1.5.9 menambahkan parameter
leafOnlyuntuk mengatur apakah akan mengembalikan simpul daun akhir saja dari pohon.
Versi 1.5.8 memulihkan kode untuk mengembalikan
nodesyang terhapus secara misterius di versi sebelumnya. Jika proyek Anda hanya memerlukan nilai kunci node shuttle, tidak perlu memperbarui! meminta maaf. . .
Versi 1.5.7 memperbaiki masalah data subkomponen asinkron yang terkadang tidak diperbarui! Memperbaiki kesalahan saat menyesuaikan nama parameter node_key, anak-anak, secara otomatis mengganti pid lapisan data pertama dengan 0
Versi 1.4.9 menambahkan parameter panggilan balik untuk menambah dan menghapus tombol. Parameter pertama dari function(keys,nodes) adalah nilai node-key dari node yang dipilih, dan parameter kedua adalah node node yang dipilih.
Versi 1.4.8 memperbaiki masalah id yang tidak dapat melewati fungsi verifikasi berulang ketika bertipe nomor, namun tetap disarankan menggunakan tipe string untuk id.
Versi 1.4.7 menambahkan parameter
defaultProps, parameternode_key, dan parameterpid. Fungsi utamanya adalah untuk menyesuaikan beberapa nama bidang penting untuk meningkatkan fleksibilitas data dan menghindari pengorbanan ke latar belakang karena nama bidang yang berbeda.
Versi 1.3.7 menghilangkan ketergantungan pada pustaka loadsh. Sebelumnya, pustaka ini hanya digunakan untuk beberapa pemrosesan penyalinan mendalam.
Parameter: width Deskripsi: Tipe宽度: String Diperlukan: false Default: 100% Tambahan:建议在外部盒子设定宽度和位置
Parameter: height Deskripsi: Jenis高度: String Diperlukan: false Default: 320px
Parameter: title Deskripsi: Jenis标题: Array Diperlukan: false Default: ["源列表", "目标列表"]
Parameter: button_text Deskripsi: Jenis按钮名字: Array Diperlukan: false Default:空
Parameter: from_data Deskripsi: Tipe源数据: Array Diperlukan: true Tambahan:数据格式同element-ui tree组件,但必须有id和pid
Parameter: to_data Deskripsi: Tipe目标数据: Array Diperlukan: true Tambahan:数据格式同element-ui tree组件,但必须有id和pid
Parameter: defaultProps Deskripsi:配置项-同el-tree中props Diperlukan: false Suplemen:用法和el-tree的props一样
Parameter: deskripsi node_key :自定义node-key的值,默认为id : false Tambahan:必须与treedata数据内的id参数名一致,必须唯一
Parameter: pid Deskripsi:自定义pid的参数名,默认为"pid" Diperlukan: false Tambahan:有网友提出后台给的字段名不叫pid,因此增加自定义支持
--(Usang) Tidak direkomendasikan! Parameter: leafOnly Deskripsi:是否只返回叶子节点Tipe: Boolean Diperlukan: false Tambahan:默认false,如果你只需要返回的末端子节点可使用此参数
Parameter: deskripsi filter :是否开启筛选功能Jenis: Boolean Diperlukan: false
Parameter: openAll Deskripsi:是否默认展开全部: Boolean Diperlukan: false
Parameter: renderContent Deskripsi: Jenis自定义树节点: Diperlukan Function : false Tambahan:用法同element-ui tree
Parameter: deskripsi mode :设置模式,字段可选值为transfer|addressList Jenis: String Diperlukan: false Suplemen: mode默认为transfer模式,即树形穿梭框模式,可配置字段为addressList改为通讯录模式,通讯录模式时按钮不可自定义名字,如要自定义标题名在title数组传入四个值即可,addressList模式时标题默认为通讯录、收件人、抄送人、密送人
Parameter: transferOpenNode Deskripsi:穿梭后是否展开穿梭的节点: Boolean Diperlukan: false Tambahan:默认为true即展开穿梭的节点,便于视觉查看,增加此参数是因为数据量大时展开会有明显卡顿问题,但注意,如此参数设置为false则穿梭后不展开,毕竟无法确定第几层就会有庞大数据
Parameter: defaultCheckedKeys Deskripsi: Jenis默认展开节点: Array Diperlukan: false Tambahan:只匹配初始时默认节点,不会在你操作后动态改变默认节点
Parameter: placeholder Deskripsi:设置搜索框提示语: String Diperlukan: false Tambahan:默认为请输入关键词进行筛选
Parameter: defaultTransfer deskripsi:是否自动穿梭一次默认选中defaultCheckedKeys的节点: Boolean . Diperlukan: false Tambahan:默认false,用来满足用户不想将数据拆分成fromData和toData的需求
Parameter: arrayToTree Deskripsi:是否开启一维数组转化为树形结构Tipe: Boolean Diperlukan: false Tambahan:数据必须存在根节点,并且不会断节,数据格式详见github上app.vue,根据id、pid对应关系转化,存在一定的性能问题
Parameter: addressOptions Deskripsi:通讯录模式配置项{num: Number, suffix: String, connector: String} Tipe: Object Diperlukan: false Tambahan: num-> 所需右侧通讯录个数,默认3 suffix-> label后想要拼接的字段(如id,即取此条数据的id拼接在后方)默认suffix connector -> 连接符(字符串)默认-
Parameter: lazy Deskripsi:是否启用懒加载Jenis: Boolean Diperlukan: false Tambahan:默认false,效果动el-tree懒加载,不可和openAll或默认展开同时使用
Parameter: lazyFn Deskripsi:懒加载的回调函数: Function Diperlukan: true Tambahan:当适用lazy时必须传入回调函数,示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node,resolve->懒加载resolve,from -> left|right 表示回调来自左侧|右侧
Peristiwa: addBtn Deskripsi:点击添加按钮时触发的事件: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据,2.移动后右侧数据,3.移动的节点keys、nodes、halfKeys、halfNodes对象;通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
Peristiwa: removeBtn Deskripsi:点击移除按钮时触发的事件: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据,2.移动后右侧数据,3.移动的节点keys、nodes、halfKeys、halfNodes对象;通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
Peristiwa: left-check-change Deskripsi:左侧源数据勾选事件: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
Peristiwa: right-check-change Deskripsi: Parameter panggilan balik右侧目标数据勾选事件: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
Slot: left-footer , right-footer Deskripsi:穿梭框左侧、右侧底部slot
Slot: title-left , title-right Deskripsi:穿梭框标题区左侧、右侧自定义内容

