el data table
v1.23.2
Solicitação automática por axios , suporta paginação, estrutura de dados em árvore, pesquisa personalizada, coluna de operação personalizada, o que facilita a API de descanso?
A tabela usa @femessage/el-form-renderer para renderizar o formulário.
中文文档
el-data-table é criado para resolver problemas de negócios, portanto a lógica CRUD é definida internamente.
Por exemplo, para desenvolver uma API user , suponha que seu caminho relativo seja assim:
/ api / v1 / usersA API CRUD tranquila deve ser:
GET / api / v1 / users ? page = 1 & size = 10estrutura de dados padrão
{
"code" : 0 ,
"msg" : "ok" ,
"payload" : {
"content" : [ ] , // dataPath
"totalElements" : 2 , // totalPath
}
}Você pode personalizar dataPath/totalPath.
Se hasPagination=false , dataPath padrão é payload
POST / api / v1 / users PUT / api / v1 / users / : id DELETE / api / v1 / users / : idEntão só precisa usar o seguinte código para completar as funções 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 >Os resultados são os seguintes:
Recuperar
Criar
Atualizar
Excluir
⬆Voltar ao topo
Mover o conteúdo do modelo para o script significa que o modelo pode ser reduzido e o js pode ser extraído para outro arquivo para reutilização. Ao mesmo tempo, os dados em js são na verdade um pedaço de json, o que significa que a ferramenta de geração de código pode ajudar.
⬆Voltar ao topo
Por que você cria a tabela el-data com base na tabela el do element-ui?
Muitas vezes ouço os seguintes sons:
Em primeiro lugar, devo dizer que el-table é realmente flexível, mas ao implementar solicitações de paginação, apenas el-table não é suficiente e o componente el-pagination precisa ser combinado. A maior parte do conteúdo do processamento de paginação é repetida. Sem um componente de negócios de alto nível, obtemos código duplicado em todos os lugares.
Na verdade, no aplicativo da web de administração ou painel, existem muitas operações CRUD, usando API restful. É possível usar apenas uma URL para criar um componente para completar funções CRUD.
Em segundo lugar, muitos desenvolvedores experientes pensam que quanto mais flexíveis, melhor.
Porém, para os “novatos” que não têm experiência, eles não estão familiarizados com cenários de negócios comuns. Algumas operações básicas, como validação de formulário, filtragem de espaço, adição de carregamento, tratamento de exceções, podem ser esquecidas, o que resulta em bugs.
Para os desenvolvedores de negócios de linha de frente, diante de tarefas de desenvolvimento intermináveis, na verdade, eles não querem lidar com lógicas de negócios repetidas. eles só querem liberar as mãos e sair do trabalho mais cedo.
Nessa situação nasceu el-data-table.
⬆Voltar ao topo
⬆Voltar ao topo
⬆ Voltar ao topo
Incentive o uso do Yarn para instalar
yarn add @femessage/el-data-table⬆Voltar ao topo
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 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 >⬆Voltar ao topo
⬆Voltar ao topo
Para quem tem interesse em contribuir com este projeto, como:
Consulte nosso guia de contribuição.
⬆ Voltar ao topo
Os agradecimentos vão para essas pessoas maravilhosas (chave emoji):
imposto ? ? ? | DonaldShen | MiffyCooper | Huan Feng Chen | MAL ? | Alvin ? | Han ? |
Kunzhijia ? | Edgar ? | Barrétem | 阿禹。 | lujunwei | cjf ? | Jack-arco-íris ? |
ColMugX | bloqueado pela neve | Esponja ? | 4Arca | Htongbing | PPPenny | PopupDialog ? |
Jogiter | yolofit ? | huazaili ? |
Este projeto segue a especificação de todos os contribuidores. Contribuições de qualquer tipo são bem-vindas!
MIT
⬆Voltar ao topo
