el data tree

el-data-tree

Use axios para enviar solicitações automaticamente, oferecer suporte à filtragem, personalizar colunas de ação e tornar o RESTful CRUD mais simples.

中文文档

Índice

• Introdução
  • CRUD
• Recurso
• Demonstração
• Pré-instalação
• Instalar
• Início rápido
  • Componente de registro global
  • Modelo
• Colaboradores
• Licença

Introdução

CRUD

el-data-tree é criado para resolver problemas de negócios, portanto a lógica CRUD é definida internamente.
Por exemplo, para desenvolver a API user , suponha que seu caminho relativo seja assim:

/api/v1/users

A API CRUD tranquila deve ser:

• Recuperar

 GET / api / v1 / users ? type = 1

• Criar

 POST / api / v1 / users

• Atualizar

 PUT / api / v1 / users / : id

• Excluir

 DELETE / api / v1 / users / : id

Então só precisa usar o seguinte código para completar as funções 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 >

Os resultados são os seguintes:

• Recuperar

• Criar

• Atualizar

• Excluir

⬆ Voltar ao topo

Recurso

• Use a configuração para chamar a API restful para concluir as funções CRUD
• Suporta barra de menu personalizada, bem como funções de ação personalizadas
• Salve as ExpandedKeys por padrão e não perderá o estado das ExpandedKeys após chamar APIs de criação/exclusão/atualização
• Método otimizado de verificação de nó

⬆ Voltar ao topo

Demonstração

• documento e demonstração on-line

⬆ Voltar ao topo

Pré-instalação

Este componente peerDependencies em element-ui e @femessage/el-form-renderer e axios
certifique-se de ter instalado em seu projeto

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

⬆ Voltar ao topo

Instalar

Incentive o uso de fios para instalar

yarn add @femessage/el-data-tree

⬆ Voltar ao topo

Início rápido

Componente de registro global

Isto é por motivo de minificação: desta forma, construir seu aplicativo, webpack ou outro bundler apenas agrupa as dependências em um fornecedor para todas as páginas que usam este componente, em vez de um fornecedor para uma 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

⬆ Voltar ao topo

Modelo

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

⬆ Voltar ao topo

Colaboradores

Alvin

imposto ? ?

Pedra Fria

MAL ?

DonaldShen ?

ColMugX ?

OuZuYu ?

Este projeto segue a especificação de todos os contribuidores. Contribuições de qualquer tipo são bem-vindas!

⬆ Voltar ao topo

Licença

MIT

⬆ Voltar ao topo