Vue шаг за шагом. Стандартный компонент для редактирования данных. Пример#11
Стандартный компонент
Представьте, что вам нужно сделать десятки интерфейсов для заполнения каких-нибудь данных в своем приложении. Данные однотипные и интерфейсы так же похожи один на другой. Для таких целей логично сделать универсальный компонент, чтобы можно было перечислить поля с их типами, свойствами и все работало само. Именно это реализовано в этом примере. А именно сделан компонент standard-page, который включает в себя ранее созданные компоненты standard-table, standard-form. В результате мы получаем компонент, который постранично выводит данные в табличной форме с сортировкой, фильтром/поиском, с формой для редактирования, возможностью добавления и удаления записей.
В файле приложения описана константа const appDataset. В ней собрано описание полей всех компонент в одном месте. Вы можете поступить по другому. Или скажем, вообще загружать эти данные из отдельного файла.
Компонент standard-page
Теперь в роутах можно указывать компоненту standard-page, указав в качестве параметров имя instance (он должен быть описан в appDataset), и title — заголовок. См.:
{ path: '/seller', component: { template: '<standard-page instance="seller" title="Seller" />' } },
{ path: '/product', component: { template: '<standard-page instance="product" title="Product" />' } }
Теперь нам не нужно загружать файлы seller.js, product.js, в данном примере они не используются.
Также, при необходимости, компонент standard-page можно использовать как это сделано в компоненте client.
Как видите, теперь для создания интерфейса редактирования данных достаточно в appDataset описать новый instance и создать отдельный роут. И все, можно работать с данными.
Расширен список типов полей в формах
Для компоненты standard-form расширен список используемых полей:
Стандартные:
- label
- html
- string
- password
- tel
- url
- textarea
- number
- select
- checkbox
- radio
Material Design:
- date
- switch
- autocomplete
- chips
- file
Все это сказочка для новичков
В жизни так бывает редко. Обычно среди «стандартных данных» постоянно случаются «уникалы» и руководство/клиенты желают видеть совершенно отличное от стандартных их отображение. В следующем примере я покажу как с помощью ранее реализованных компонент, с минимальными усилиями реализовать интерфейсы, разительно отличающиеся от ранее здесь представленных. Также будет представлен пример, когда для редактирования данных используется отдельный роут.
Резюме
В этом примере создана Стандартная компонента для постраничного отображения данных с возможностью редактирования, добавления и удаления данных. Теперь для создания интерфейса для работы с данными достаточно указать список полей для таблицы и формы в константе appDataset и создать новый роут.
В следующем примере
Отдельный роут для редактирования данных. Разнообразие отображения — комбинирование ранее созданных компонент и использование миксинов. Application Settings — сохранение настроек пользователя.
Смотри также:
- Vue. Vue-router
- Vue. Свойство data. Основы компонент
- Vue. CRUD. Работа с данными
- Vue. Mixins (Примеси)
- Vue. computed свойства. Постраничный вывод данных
- Vue. Сортировка, поиск данных в таблицах
- Vue. Таблица - трансформер под настольные и мобильные версии
- Vue. Стандартная таблица. Минимизируем код
- Vue. Динамическая загрузка компонент
- Vue. Диалоги и Notifications
- Vue.Стандартный компонент для редактирования данных
- Vue. Разнообразие из кирпичиков
- Flask + Vue. Финальный пример
Недавні записи
- FOC - своя реалізація векторного керування. Підбиваю підсумки 2022 року
- Конструктор регуляторів моторів. Підбиваю підсумки 2022 року.
- Чому трифазні мотори стали такими популярними?
- FOC & Polar coordinates
- Конструктор регуляторів PMSM, BLDC двигунів
- Своя бібліотека для векторного керування безколекторними моторами
- Not Allowed
- Адаптивний ПІД регулятор
- Конструктор регуляторів моторів. Структура.
- Конструктор регуляторів моторів. Анонс.
Tags
tim nodemcu encoder pwm solar watchdog atmega mongodb timer ngnix mpu-6050 options docker gps html foc esp8266 barometer bkp examples mpx4115a bldc pmsm programmator wifi bmp280 dht11 stm32 websocket bme280 usb bluetooth flask uart sensors max1674 motor i2c rtc hih-4000 remap flash capture dma rs-232 led mpu-9250 3d-printer eeprom adc books sms web usart battery avr rfid python gpio exti ethernet java-script eb-500 displays smd dc-dc lcd css ssd1331 ssd1306 meteo servo nvic soldering brushless git raspberry-pi st-link piezo
Архіви