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. Финальный пример
Недавні записи
- U-FOC PC Monitor для Chrome browser
- Фільтрація Back-EMF. Безсенсорні BLDC мотори
- Text to speech. Українська мова
- LCD Display ST7567S (IIC)
- Розпізнавання мови (Speech recognition)
- Selenium
- Комп'ютерний зір (Computer Vision)
- Деякі думки про точність вимірювань в електроприводі
- Датчики Холла 120/60 градусів
- Модуль драйверів напівмосту IGBT транзисторів
Tags
eeprom gps mpu-9250 sensors lcd displays html tim meteo remap pwm avr rfid ethernet pmsm raspberry-pi mpx4115a piezo uart watchdog exti git i2c bme280 bmp280 barometer nodemcu st-link eb-500 led atmega esp8266 bkp servo stm32 wifi flask solar bluetooth brushless motor smd docker books encoder capture battery soldering hih-4000 ssd1331 ssd1306 mpu-6050 dc-dc ngnix programmator mongodb examples adc nvic dht11 rs-232 css websocket web python 3d-printer rtc usart gpio foc bldc usb flash dma sms max1674 java-script timer options
Архіви