Saya belum memperbarui artikel untuk sementara waktu, terutama karena saya sibuk mempelajari hal -hal baru dan lupa membagikannya. Saya sangat malu.
Dengar, saya memposting sebuah artikel di tengah malam, berbagi widget vue yang disebut bootpage yang saya tulis sendiri.
Jika Anda tidak mengerti vue.js, Anda dapat pindah ke artikel saya sebelumnya "Bicara singkat tentang vue.js" untuk mempelajarinya.
Pengantar komponen bootpage
Sebenarnya, ini bukan komponen kelas atas. Sebaliknya, ini benar -benar hanya komponen paging meja sederhana. Ini terutama karena saya membutuhkan komponen paging tabel dalam proyek terbaru saya. Komponen pagination perpustakaan komponen resmi VUE terlalu kuat atau tidak cocok untuk saya, jadi saya menulis sendiri untuk melakukannya sendiri. Mungkin seseorang seperti saya membutuhkan komponen paging sederhana untuk menerapkan fungsi paging sederhana. Saya akan membagikannya di sini, dan semua orang akan mengisi lubang.
Jika Anda memerlukan komponen kelas atas, Anda dapat pindah ke Perpustakaan Komponen Vue Resmi: https://github.com/vuejs/awesome-vue#libraries-Plugins
BootPage adalah komponen paging tabel yang mendukung data statis dan data server. Ini mendukung penyesuaian jumlah baris yang ditampilkan pada setiap halaman dan jumlah halaman yang ditampilkan. Gaya ini didasarkan pada bootstrap, seperti ini:
Demonstrasi online: https: //luozhihao.github.io/b ...
Cara menggunakan
Dalam file .vue komponen, kami menulis templat seperti ini, yaitu kode html:
<able> <Thead> <tr> <th> id </t> <th> nama </t th> <th> konten </t th> <th> komentar </th> </tr> </thead> <tbody> <ttr v-for = "data di tablel"> <td v-text = "data.num.num"> </td> <td vext = "data v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <Div> <tombol v-on: click = "Refresh"> LICKS </Button> </Div> <Div> <boot-on = "LIGE =" "DATA"> DATA "" DATA "" DATA "" DATA "" DATA "" DATA "> </DATA"> </DATEPOR "> : halaman-len = "pagelen": param = "param"> </boot-page> </div> </td> </td> </tfoot> </able>
Dalam tag <toot-page> async mengacu pada apakah akan mendapatkan data dari sisi server, false tidak; Data adalah array data tabel statis; Lensa adalah array baris yang ditampilkan per halaman; Len halaman adalah jumlah halaman yang dapat ditampilkan;
Kode JavaScript yang menggunakan data statis, yaitu konten dalam tag skrip adalah sebagai berikut:
<script> Impor bootpage dari './components/bootpage.vue' Ekspor default {data () {return {lenarr: [10, 50, 100, 100], // Panjang tampilan per pagelen: 5, // menampilkan jumlah halaman yang dapat ditampilkan: [{num: 1, penulis: 'luozh', contents yang dapat ditampilkan: [{num: 1, penulis: 'luozh', contents ' Komentar: 'DSDS'}, {num: 2, penulis: 'luozh', konten: 'dukungan untuk menyesuaikan jumlah baris yang ditampilkan per halaman dan jumlah halaman yang ditampilkan. Gaya ini didasarkan pada bootstrap ', komentar:' dsds '}, {num: 3, penulis:' luozh ', konten:' <boot-page> tag async mengacu pada apakah akan mengambil data dari sisi server, false ',', 'dsds'}, {num: 4, penulis: 'luozh', contsds: {num: 4, penulis: 'luozh', contsds '{a num: 4, penulis:' luozh ', contsds' {num: 4, penulis: 'luozh', contsds '{num: 4, penulis:' luozh ', contsds' {num: 4, penulis: 'luozh', contsds '{num: 4, penulis:' luozh ', contsds' {a num: 4, penulis: 'luozh', contsds ', a ARACICE ADALAH ADALU 'DSDS'}, {num: 5, penulis: 'luozh', isi: 'Lensa adalah array baris yang ditampilkan per halaman', komentar: 'dsds'}, {num: 6, penulis: 'luozh', konten: 'len adalah jumlah halaman yang dapat ditampilkan', komentar: 'DS', ds '{num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: num: ds: ds:' ds ', ds:' ds ', ds:' DS: 'DS:' DS: 'DS:' DS: 'DS:' DS: 'DS:' DS: 'DS: 'The server's return parameters are {data:[], page_num: 6}, where data is tabular data and page_num is the total number of pages', remark: 'dsds'}, {num: 8, author: 'luozh', contents: 'can call this.$refs.page.refresh() to refresh the table data', remark: 'dsds'} ], // The raw table data, you tidak perlu menggunakan TableList saat menggunakan data server: [] // data post-paging dikembalikan oleh komponen pagination}}, komponen: {bootpage}, peristiwa: {// data tabel dikembalikan oleh komponen pagination '(data) {this.tablelist = data}}} </skrip>Secara umum, kami jarang menggunakan data tabel statis, dan sebagian besar data aplikasi diperoleh dari sisi server, jadi di sini ada metode untuk mendapatkan data pagination server:
Komponen HTML yang menggunakan data server adalah sebagai berikut:
<boot-halaman v-ref: halaman: async = "true": lens = "lenarr": url = "url": halaman-len = "pagelen": param = "param"> </boot-page>
di mana URL adalah alamat permintaan server; Param adalah objek parameter yang perlu dikirim ke server;
Kode menggunakan JavaScript data server adalah sebagai berikut:
<script> Impor bootpage dari './components/bootpage.vue' Ekspor default {data () {return {lenarr: [10, 50, 100, 100], // Panjang tampilan per halaman setel pagelen: 5, // jumlah halaman yang dapat ditampilkan, '/pass/{pagar,/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/PARUS/PARUS/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/PALLIS/BOTEKLET/BOTEGAGE/////PARTON PARUS PARUS PALLE,' back by the pagination component} }, methods: { refresh () { this.$refs.page.refresh() // A table refresh function is provided here} }, components: { bootPage }, events: { // The table data returned by the pagination component (here is the data returned by the server) 'data' (data) { this.tableList = data }, // Refresh the data 'Refresh' () {this.refresh ()}}}} </script>Catatan: Selain konten array yang diteruskan ke tabel komponen, server juga membutuhkan nama kunci dari jumlah total halaman, bernama page_num
Parameter yang disertai komponen ke server adalah:
{
Aktif: 1, // Nomor halaman saat ini
Panjang: 5 // Jumlah yang ditampilkan per halaman
}
Parameter untuk pengembalian server harus:
{
Data: [], // Data Tabel
page_num: 5 // jumlah halaman total
}
Kode Sumber Komponen
Adapun implementasi pagination, saya tidak akan menampilkan kode sumber di sini. Saya mengunggah semua kode sumber ke github saya, dan alamatnya adalah: https://github.com/luozhihao/bootpage
Izinkan saya mengingatkan Anda sebelumnya: karena saya membutuhkan beberapa jam untuk mengusir komponen ini, saya pasti tidak memadai dalam format menulis dan spesifikasi komponen VUE dan belum sepenuhnya mandiri, jadi saya secara sadar mengisi lubang. Saya hanya akan membagikannya di sini.
Tentu saja, Anda juga dapat memodifikasi kode komponen sesuka hati sesuai dengan penggunaan proyek Anda. Lagi pula, masih cukup rumit untuk menerapkan komponen paging yang besar dan lengkap.
Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.