el data table
v1.23.2
Permintaan otomatis oleh axios , mendukung pagination, struktur data pohon, pencarian khusus, kolom operasi khusus, yang membuat rest api menjadi mudah?
Tabel ini menggunakan @femessage/el-form-renderer untuk merender formulir.
中文文档
el-data-table dibuat untuk menyelesaikan masalah bisnis, sehingga logika CRUD diatur di dalamnya.
Misalnya, untuk mengembangkan api user , misalkan jalur relatifnya seperti ini:
/ api / v1 / usersApi CRUD yang tenang seharusnya:
GET / api / v1 / users ? page = 1 & size = 10struktur data default
{
"code" : 0 ,
"msg" : "ok" ,
"payload" : {
"content" : [ ] , // dataPath
"totalElements" : 2 , // totalPath
}
}Anda dapat menyesuaikan dataPath/totalPath.
Jika hasPagination=false , dataPath default adalah payload
POST / api / v1 / users PUT / api / v1 / users / : id DELETE / api / v1 / users / : idMaka hanya perlu menggunakan kode berikut untuk menyelesaikan fungsi CRUD
< template >
< el-data-table v-bind =" tableConfig " > </ el-data-table >
</ template > < script >
export default {
data ( ) {
return {
tableConfig : {
url : '/example/users' ,
columns : [
{
prop : 'name' ,
label : '用户名'
}
] ,
searchForm : [
{
type : 'input' ,
id : 'name' ,
label : '用户名' ,
el : {
placeholder : '请输入'
}
}
] ,
form : [
{
type : 'input' ,
id : 'name' ,
label : '用户名' ,
el : {
placeholder : '请输入'
} ,
rules : [
{
required : true ,
message : '请输入用户名' ,
trigger : 'blur'
}
]
}
]
}
}
}
}
</ script >Hasilnya adalah sebagai berikut:
Mengambil
Membuat
Memperbarui
Menghapus
⬆Kembali ke Atas
Memindahkan konten template ke skrip berarti template dapat dikurangi dan js dapat diekstraksi ke file lain untuk digunakan kembali. Pada saat yang sama, data di js sebenarnya adalah bagian dari json, ini berarti alat pembuat kode dapat membantu.
⬆Kembali ke Atas
Mengapa Anda membuat el-data-table berdasarkan el-table elemen-ui?
Saya sering mendengar suara-suara berikut:
Pertama-tama, saya harus mengatakan, el-table sangat fleksibel, tetapi ketika mengimplementasikan permintaan paging, el-table saja tidak cukup, dan komponen el-pagination perlu digabungkan. Sebagian besar konten pemrosesan halaman diulang. Tanpa komponen bisnis tingkat tinggi, kita mendapatkan kode duplikat di mana-mana.
Faktanya, di aplikasi web admin atau dashboard, ada banyak operasi CRUD, menggunakan restful API. Dimungkinkan untuk menggunakan hanya satu url untuk membuat komponen guna menyelesaikan fungsi CRUD.
Kedua, banyak pengembang berpengalaman berpikir bahwa semakin fleksibel komponennya, semakin baik.
Namun, bagi "pemula" yang kurang pengalaman, mereka belum familiar dengan skenario bisnis umum. Beberapa operasi dasar, seperti validasi formulir, pemfilteran ruang, penambahan pemuatan, penanganan pengecualian, mungkin terlupakan, yang mengakibatkan bug.
Bagi para pengembang bisnis lini depan, dalam menghadapi tugas berkembang yang tiada henti, nyatanya mereka tidak mau berurusan dengan logika bisnis yang berulang-ulang. mereka hanya ingin melepaskan diri dan pulang kerja lebih awal.
Dalam situasi seperti itu, lahirlah el-data-table.
⬆Kembali ke Atas
⬆Kembali ke Atas
⬆ Kembali ke Atas
Dorong penggunaan Yarn untuk menginstal
yarn add @femessage/el-data-table⬆Kembali ke Atas
Ini karena alasan minifikasi: dengan cara ini, buat aplikasi, webpack, atau bundler lainnya, cukup gabungkan dependensi ke dalam satu vendor untuk semua halaman yang menggunakan komponen ini, bukan satu vendor untuk satu halaman
import Vue from 'vue'
// register component and loading directive
import ElDataTable from '@femessage/el-data-table'
import ElFormRenderer from '@femessage/el-form-renderer'
import {
Button ,
Dialog ,
Form ,
FormItem ,
Loading ,
Pagination ,
Table ,
TableColumn ,
Message ,
MessageBox
} from 'element-ui'
Vue . use ( Button )
Vue . use ( Dialog )
Vue . use ( Form )
Vue . use ( FormItem )
Vue . use ( Loading . directive )
Vue . use ( Pagination )
Vue . use ( Table )
Vue . use ( TableColumn )
Vue . component ( 'el-form-renderer' , ElFormRenderer )
Vue . component ( 'el-data-table' , ElDataTable )
// to show confirm before delete
Vue . prototype . $confirm = MessageBox . confirm
// show tips
Vue . prototype . $message = Message
// if the table component cannot access `this.$axios`, it cannot send request
import axios from 'axios'
Vue . prototype . $axios = axios< template >
< el-data-table ></ el-data-table >
</ template >⬆Kembali ke Atas
⬆Kembali ke Atas
Bagi mereka yang tertarik untuk berkontribusi pada proyek ini, seperti:
Silakan merujuk ke panduan kontribusi kami.
⬆ Kembali ke Atas
Terima kasih kepada orang-orang hebat ini (kunci emoji):
memungut ? ? ? | Donald Shen | MiffyCooper | Huanfeng Chen | JAHAT ? | Alvin ? | Han ? |
kunzhijia ? | Edgar ? | Barretem | 阿禹。 | lujunwei | cjf ? | Jack-pelangi ? |
ColMugX | terkunci salju | Sepon ? | 4 Bahtera | Htongbing | PPPenny | Dialog Popup ? |
Jogiter | yolofit ? | huazaili ? |
Proyek ini mengikuti spesifikasi semua kontributor. Kontribusi apa pun diterima!
MIT
⬆Kembali ke Atas
