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. Финальный пример
Недавні записи
- Модуль драйверів напівмосту IGBT транзисторів
- Драйвер IGBT транзисторів на A316J
- AS5600. Варіант встановлення на BLDC мотор
- DC-DC для IGBT драйверів ізольований 2 W +15 -8 вольт
- U-FOC - Векторне керування безколекторними моторами
- FOC - своя реалізація векторного керування. Підбиваю підсумки 2022 року
- Конструктор регуляторів моторів. Підбиваю підсумки 2022 року.
- Чому трифазні мотори стали такими популярними?
- FOC & Polar coordinates
- Конструктор регуляторів PMSM, BLDC двигунів
Tags
ngnix avr brushless motor examples dma books lcd usb dht11 piezo led servo web pmsm esp8266 ssd1331 wifi bme280 mpu-9250 capture hih-4000 bldc programmator rs-232 ethernet docker dc-dc sms bkp stm32 css git uart meteo bmp280 3d-printer displays mpx4115a eeprom max1674 soldering atmega timer gps tim flash nvic html java-script pwm solar rfid nodemcu st-link options watchdog adc gpio battery bluetooth raspberry-pi python websocket usart foc mongodb flask mpu-6050 barometer exti smd ssd1306 i2c sensors remap rtc encoder eb-500
Архіви