Vue шаг за шагом. Стандартный компонент для редактирования данных. Пример#11

27.03.2020

Стандартный компонент

Представьте, что вам нужно сделать десятки интерфейсов для заполнения каких-нибудь данных в своем приложении. Данные однотипные и интерфейсы так же похожи один на другой. Для таких целей логично сделать универсальный компонент, чтобы можно было перечислить поля с их типами, свойствами и все работало само. Именно это реализовано в этом примере. А именно сделан компонент 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
email
password
tel
url
textarea
number
select
checkbox
radio

Material Design:

date
switch
autocomplete
chips
file

Все это сказочка для новичков

В жизни так бывает редко. Обычно среди «стандартных данных» постоянно случаются «уникалы» и руководство/клиенты желают видеть совершенно отличное от стандартных их отображение. В следующем примере я покажу как с помощью ранее реализованных компонент, с минимальными усилиями реализовать интерфейсы, разительно отличающиеся от ранее здесь представленных. Также будет представлен пример, когда для редактирования данных используется отдельный роут.

Резюме

В этом примере создана Стандартная компонента для постраничного отображения данных с возможностью редактирования, добавления и удаления данных. Теперь для создания интерфейса для работы с данными достаточно указать список полей для таблицы и формы в константе appDataset и создать новый роут.

В следующем примере

Отдельный роут для редактирования данных. Разнообразие отображения — комбинирование ранее созданных компонент и использование миксинов. Application Settings — сохранение настроек пользователя.

Скачать пример #11

Смотри также:

Web-dev склерозник

Коментарі:

Додати коментар

Категорії

Недавні записи

Архіви

оберіть місяць: