Vue шаг за шагом. Стандартная таблица. Минимизируем код. Пример#8

23.03.2020

Стандартная таблица. Минимизируем код.

В этом примере сделан компонент standard-table. В нем реализована возможность не только отображать любые поля (колонки), но и добавлять любые "кнопки" в колонку "Action", связывая родительский компонент с дочерним.

Применяя компонент standard-table, мы легко сможем реализовать вывод других данных Seller и Product с тем же функционалом (сортировка, фильтр/поиск, постраничный вывод и т.д.). При этом нам достаточно перечислить нужные поля и задать им свойства.

Seller:

    
  <standard-table v-if="data"
    perpage="10"
    :rows="data"
    :fields="[
        {name:'name', 'title': 'Name', type:'string', sort: true},
        {name:'phone', 'title': 'Phone', type:'string', sort: true},
        {name:'email', 'title': 'E-mail', type:'string', sort: true}
    ]"
    perpage="10"
  />

Product:

    
  <standard-table v-if="data"
    perpage="10"
    :rows="data"
    :fields="[
        {name:'code', 'title': 'Code', type:'string', sort: true},
        {name:'name', 'title': 'Name', type:'string', sort: true},
        {name:'price', 'title': 'Price', type:'number', sort: true},
        {name:'warehouse', 'title': 'Warehouse', type:'string', sort: true}
    ]"
    perpage="10"
  />

Меня достало, что все компоненты в одном файле одной длинной кишкой. Давайте их разделим и сделаем динамическую загрузку (не прибегая к системам сборки). Разумеется, во Vue есть шикарный механизм разделения приложения на чанки, и при переходе к системам сборки нужно использовать именно возможности фреймворка. Следующий пример динамической загрузки компонент лишь демонстрация того, как это можно легко сделать и на сколько Vue гибкий инструмент.

Резюме

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

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

Собственная функция динамической загрузки компонент.

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

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

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

Коментарі:

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

Категорії

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

Архіви

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