el data tree

el-árbol-de-datos

¿Utiliza axios para enviar solicitudes automáticamente, admitir filtrado, personalizar columnas de acciones y simplificar RESTful CRUD?

中文文档

Tabla de contenido

• Introducción
  • CRUD
• Característica
• Manifestación
• Preinstalación
• Instalar
• Inicio rápido
  • Componente de registro global
  • Plantilla
• Colaboradores
• Licencia

Introducción

CRUD

el-data-tree 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/users

La API CRUD relajante debería ser:

• Recuperar

 GET / api / v1 / users ? type = 1

• Crear

 POST / api / v1 / users

• Actualizar

 PUT / api / v1 / users / : id

• Borrar

 DELETE / api / v1 / users / : id

Entonces solo necesita usar el siguiente código para completar las funciones CRUD

 < template >
  < el-data-tree v-bind =" treeConfig " > </ el-data-tree >
</ template > 

 < script >
export default {
  data ( ) {
    return {
      treeConfig : {
        url : '/example/users' ,
        dataPath : 'data.payload' ,
        showFilter : true ,
        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 arriba

Característica

• Utilice la configuración para llamar a restful api para completar las funciones CRUD
• Admite barra de menú personalizada, así como funciones de acción personalizadas
• Guarde las claves expandidas de forma predeterminada y no perderá el estado de las claves expandidas después de llamar a crear/eliminar/actualizar apis
• Método de verificación de nodos optimizado

⬆ Volver arriba

Manifestación

• documento y demostración en línea

⬆ Volver arriba

Preinstalación

Este componente peerDependencies en element-ui y @femessage/el-form-renderer y axios
asegúrese de haberlo instalado en su proyecto

yarn add element-ui @femessage/el-form-renderer axios

⬆ Volver arriba

Instalar

Fomentar el uso de hilo para instalar.

yarn add @femessage/el-data-tree

⬆ Volver arriba

Inicio rápido

Componente de registro global

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 ElDataTree from '@femessage/el-data-tree'
import ElFormRenderer from '@femessage/el-form-renderer'
import {
  Button ,
  Dialog ,
  Dropdown ,
  DropdownMenu ,
  DropdownItem ,
  Form ,
  FormItem ,
  Input ,
  Loading ,
  Tree ,
  MessageBox ,
  Message
} from 'element-ui'
Vue . use ( Button )
Vue . use ( Dialog )
Vue . use ( Dropdown )
Vue . use ( DropdownMenu )
Vue . use ( DropdownItem )
Vue . use ( Form )
Vue . use ( FormItem )
Vue . use ( Input )
Vue . use ( Loading . directive )
Vue . use ( Tree )
Vue . component ( 'el-form-renderer' , ElFormRenderer )
Vue . component ( 'el-data-tree' , ElDataTree )
// to show confirm before delete
Vue . prototype . $confirm = MessageBox . confirm
// if the tree component cannot access `this.$axios`, it cannot send request
import axios from 'axios'
Vue . prototype . $axios = axios

⬆ Volver arriba

Plantilla

< template >
  < el-data-tree ></ el-data-tree >
</ template >

⬆ Volver arriba

Colaboradores

alvin

exacción ? ?

Piedra fría

MALVADO ?

Donald Shen ?

ColMugX ?

ouzuyu ?

Este proyecto sigue la especificación de todos los contribuyentes. ¡Bienvenidos aportes de cualquier tipo!

⬆ Volver arriba

Licencia

MIT

⬆ Volver arriba