el data table
v1.23.2
AUTO запрашивание axios , поддерживает лиц, структуру данных дерева, пользовательский поиск, пользовательский столбец, который легко позволяет API REST?
В таблице используется @Femessage/El-Form-Renderer для рендеринга.
中文文档
El-Data-Table создается для решения бизнес-задач, поэтому логика CRUD установлена внутри.
Например, чтобы разработать user API, предположим, что его относительный путь, как это:
/ api / v1 / usersRestful Crud API должен быть:
GET / api / v1 / users ? page = 1 & size = 10Структура данных по умолчанию
{
"code" : 0 ,
"msg" : "ok" ,
"payload" : {
"content" : [ ] , // dataPath
"totalElements" : 2 , // totalPath
}
}Вы можете настроить DataPath/TotalPath.
Если hasPagination=false , datapath по умолчанию - payload
POST / api / v1 / users PUT / api / v1 / users / : id DELETE / api / v1 / users / : idТогда нужно только использовать следующий код для выполнения функций 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 >Результаты следующие:
Забрать
Создавать
Обновлять
Удалить
⬆back в верх
Перемещение содержания шаблона в сценарий означает, что шаблон может быть уменьшен, а JS может быть извлечен в другой файл для повторного использования. В то же время данные в JS на самом деле являются частью JSON, это означает, что инструмент генерации кода может помочь.
⬆back в верх
Почему вы создаете el-data-stable на основе El-Table of Element-UI?
Я часто слышу следующие звуки:
Прежде всего, я должен сказать, что El-Table действительно гибкая, но при внедрении запросов на пейджинг, только El-Table недостаточно, и компонент El-Pagination необходимо объединить. Большая часть содержания обработки пейджинг -обработки повторяется. Без бизнес -компонента высокого уровня мы получаем дубликат кода везде.
Фактически, в веб -приложении администратора или панели инструментов есть много операций CRUD, используя RESTFUL API. Можно использовать только один URL для создания компонента для выполнения функций CRUD.
Во -вторых, многие опытные разработчики считают, что компоненты более гибки, чем лучше.
Тем не менее, для «новостей», у которых отсутствует опыт, они не знакомы с общими бизнес -сценариями. Некоторые основные операции, такие как проверка формы, фильтрация пространства, добавление загрузки, обработка исключений, они могут забыть, что приводит к ошибкам.
Для фронт-бизнес-разработчиков, перед лицом бесконечной развивающейся задачи, на самом деле они не хотят иметь дело с повторной бизнес-логикой. Они просто хотят освободить руки и рано встать с работы.
В такой ситуации родился Эль-Дата-Тейбл.
⬆back в верх
⬆back в верх
⬆ Вернуться к вершине
Поощрять использование пряжи для установки
yarn add @femessage/el-data-table⬆back в верх
Это по причине минификации: таким образом, создание вашего приложения, веб -пакета или другого бундлера просто объединяет зависимости в один поставщик для всех страниц, которые используют этот компонент, вместо одного поставщика на одну страницу
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 >⬆back в верх
⬆back в верх
Для тех, кто заинтересован в участии в этом проекте, например:
Пожалуйста, обратитесь к нашему руководству.
⬆ Вернуться к вершине
Спасибо этим замечательным людям (ключ эмодзи):
налог ? ? ? | Дональд Шен | Miffycooper | Хуанфенг Чен | Evillt ? | Элвин ? | Хан ? |
Кунжуджия ? | Эдгар ? | Барректо | 阿禹。 | Луджунвей | CJF ? | Джек-Рейнбоу ? |
Colmugx | снегопад | Губка ? | 4арк | Htongbing | Pppenny | Popupdialog ? |
Бега | Йолофит ? | Huazaili ? |
Этот проект следует за спецификацией всех контролей. Взносы любого вида приветствуются!
Грань
⬆back в верх
