el data table
v1.23.2
Solicitud automática por axios , admite paginación, estructura de datos de árbol, búsqueda personalizada, columna de operación personalizada, ¿lo que facilita la API de descanso?
La tabla usa @femessage/el-form-renderer para representar el formulario.
中文文档
el-data-table se crea para resolver problemas comerciales, por lo que la lógica CRUD se establece en su interior.
Por ejemplo, para desarrollar una API user , supongamos que su ruta relativa es así:
/ api / v1 / usersLa API CRUD relajante debería ser:
GET / api / v1 / users ? page = 1 & size = 10estructura de datos predeterminada
{
"code" : 0 ,
"msg" : "ok" ,
"payload" : {
"content" : [ ] , // dataPath
"totalElements" : 2 , // totalPath
}
}Puede personalizar dataPath/totalPath.
Si hasPagination=false , la ruta de datos predeterminada es payload
POST / api / v1 / users PUT / api / v1 / users / : id DELETE / api / v1 / users / : idEntonces solo necesita usar el siguiente código para completar las funciones 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 >Los resultados son los siguientes:
Recuperar
Crear
Actualizar
Borrar
⬆Volver al inicio
Mover el contenido de la plantilla al script significa que la plantilla se puede reducir y js se puede extraer a otro archivo para reutilizarlo. Al mismo tiempo, los datos en js son en realidad una parte de json, lo que significa que la herramienta de generación de código puede ayudar.
⬆Volver al inicio
¿Por qué creas el-data-table basado en el-table de element-ui?
A menudo escucho los siguientes sonidos:
En primer lugar, tengo que decir que el-table es realmente flexible, pero al implementar solicitudes de paginación, solo el-table no es suficiente y es necesario combinar el componente el-pagination. La mayor parte del contenido del procesamiento de paginación se repite. Sin un componente empresarial de alto nivel, obtenemos código duplicado en todas partes.
De hecho, en la aplicación web de administración o panel de control, hay muchas operaciones CRUD que utilizan la API Restful. Es posible utilizar solo una URL para crear un componente que complete las funciones CRUD.
En segundo lugar, muchos desarrolladores experimentados piensan que cuanto más flexibles sean los componentes, mejor.
Sin embargo, los "novatos" que carecen de experiencia no están familiarizados con los escenarios empresariales habituales. Es posible que olviden algunas operaciones básicas, como la validación de formularios, el filtrado de espacios, la adición de carga y el manejo de excepciones, lo que genera errores.
Para los desarrolladores de negocios de primera línea, frente a interminables tareas de desarrollo, de hecho, no quieren lidiar con lógica de negocios repetida. solo quieren tener las manos libres y salir temprano del trabajo.
En tal situación nació el-data-table.
⬆Volver al inicio
⬆Volver al inicio
⬆ Volver arriba
Fomente el uso de Yarn para instalar
yarn add @femessage/el-data-table⬆Volver al inicio
Esto se debe a una razón de minimización: de esta manera, al construir su aplicación, paquete web u otro paquete, simplemente agrupe las dependencias en un proveedor para todas las páginas que usan este componente, en lugar de un proveedor para una página.
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 >⬆Volver al inicio
⬆Volver al inicio
Para aquellos que estén interesados en contribuir a este proyecto, tales como:
Consulte nuestra guía de contribución.
⬆ Volver arriba
Gracias a estas maravillosas personas (tecla emoji):
exacción ? ? ? | Donald Shen | miffycooper | Huan Feng Chen | MALVADO ? | alvin ? | han ? |
kunzhijia ? | Édgar ? | Barretem | 阿禹。 | lujunwei | cjf ? | Jack-arcoiris ? |
ColMugX | bloqueado por la nieve | Esponja ? | 4Arca | Htongbing | PPenny | Diálogo emergente ? |
Jogiter | yolofit ? | huazaili ? |
Este proyecto sigue la especificación de todos los contribuyentes. ¡Bienvenidos aportes de cualquier tipo!
MIT
⬆Volver al inicio
