Se lanza Antd-Crud v1.0.0, un componente avanzado para agregar, eliminar, modificar y verificar basado en Antd

Antd-crud

Un componente CRUD basado en React + Ant.Design.

característica

• 1. Extremadamente liviano, solo depende de Ant.Design y no de otras dependencias.
• 2. Admite funciones básicas [Agregar, Eliminar, Modificar, Verificar] y [Eliminar por lotes]
• 3. Admite funciones como búsqueda, paginación personalizada y clasificación personalizada
• 4. Admite funciones como actualización, exportación a Excel, impresión de datos, configuración de altura de fila, etc.
• 5. Más configuraciones de bricolaje

Función completada

•  Adición, eliminación, modificación y búsqueda básica
•  Cargando página
•  panel de búsqueda
•  El panel de búsqueda se reduce automáticamente
•  eliminación por lotes
•  Actualización de datos
•  Exportación EXCEL
•  Configuración de altura de fila
•  Función de impresión

Empieza a usar

Instalar:

npm i @codeflex/antd-crud

 

Código:

 

  

' verde ' ; if ( etiqueta === ' perdedor ' ) { color = ' volcán ' ; } return ( < Color de etiqueta = { color } clave =        
        
             
             
             
            
            
               
        
        
             
             
             
            
        
        
             
             
             
            
        
        
             
             
             
            
                  
                
                      
                                 
                            
                              
                        
                         
                              { etiqueta } > 
{ etiqueta . toUpperCase () } </ Etiqueta > ); }) } </> ), } ]; datos constantes : Cuenta [] = [ { clave : ' 1 ' , nombre : ' John Brown ' , edad : 32 , dirección : ' Nueva York No. 1 Lake Park ' , etiquetas : [ ' nice ' , ' desarrollador ' ], }, { clave : ' 2 ' , nombre : ' Jim Green ' , edad : 42 , dirección : ' London No. 1 Lake Park ' , etiquetas : [ ' perdedor ' ], }, { clave : ' 3 ' , nombre : ' Joe Black ' , edad : 32 , dirección : ' Sydney No. 1 Lake Park ' , etiquetas : [ ' cool ' , ' profesor ' ], }, ]; acciones constantes : Acciones <Cuenta> = { onCreate :( cuenta ) = > { consola . _ iniciar sesión ( " onCreate " , cuenta ); } }; retorno ( < estilo div = { { ancho :                                
                            
                        
                    
                
            
        
    


        
        
             
             
             
             
              
        
        
             
             
             
             
             
        
        
             
             
             
             
              
        
    

       
        
             
        
    


     
         
             
                      
                      
                      número de página = { 1 } 
tamaño de página = { 10 } fila total = { 2342 } /> </ div > ) }                      
                      
        
    

 

ColumnConfig Descripción del tipo:

ColumnConfig Todas las configuraciones de la columna de la tabla heredadas de Antd, consulte: https://ant-design.antgroup.com/components/table-cn#column

Sobre esta base, agregué mi propia configuración:

• marcador de posición : contenido del marcador de posición para el cuadro de búsqueda y la página de edición
• supportSearch : si se admite el elemento de búsqueda
• formulario : edite la configuración del formulario, el tipo es FormConfig

FormConfig Descripción del tipo:

type  FormConfig  =  { 
// Tipo de formulario, el valor predeterminado es Entrada, // Admite: Entrada, Número de entrada, Oculto, Radio, Casilla de verificación, Velocidad, // Cambiar, Selector de fecha, Seleccionar, Control deslizante, Tipo de carga : cadena , // Propiedades personalizadas, Admite ¿todas las configuraciones de atributos de los atributos de control antd ?: cualquiera , //Reglas de validación, ¿solo funciona en las reglas de la página de edición ?: cualquiera [], }    
    
    
    
     
    
    
     

    
     

 

Actions Descripción del tipo:

Actions Se utiliza para definir el método de escucha del componente AntdCrud.

Actions Los tipos definidos son los siguientes:

escriba  Acciones < T >  =  { 
// ¿Obtener la lista de datos en FetchList ?: ( Página actual : número , Tamaño de página : número , Página total : número , Parámetros de búsqueda : cualquiera , Clave de clasificación : cadena , Tipo de clasificación : " asc " | " desc " ) => void , //Obtener detalles de datos enFetchDetail ?: ( fila : T ) => T , // Eliminar un solo dato onDelete ?: ( fila : T ) => void , // Eliminar datos en lotes onDeleteBatch ?: ( filas : T []) = > void , //Actualización de datos enUpdate ?: ( fila : T ) => void , // Creación de datos enCreate ?: ( fila : T ) => void , // Inicializa el valor del cuadro de búsqueda enFormItemValueInit ?: ( clave : cadena ) => cualquiera }    
      
          
          
          
          
              

    
        

    
        

    
        

    
        

    
        

    
      

 

Los usuarios deben definir los métodos anteriores para operar o consultar datos. Actions 

Ejecute la demostración

git clone https://gitee.com/antdadmin/antd-crud.git 
cd antd-crud/ejemplo 

npm instalar
 npm ejecutar dev

 

Introducción a AntdAdmin

AntdAdmin es una comunidad de tecnología de código abierto basada en React + Ant.Design. Sus componentes avanzados de código abierto (o código abierto planificado) incluyen:

• antd-crud: un componente avanzado para agregar, eliminar, modificar y verificar basado en React + Ant.Design (código abierto).
• antd-bpmn: Un componente de diseño de flujo de trabajo basado en React + Ant.Design (en preparación...).
• antd-builder: un componente de diseño de arrastrar y soltar basado en React + Ant.Design (en preparación...).