Vue шаг за шагом. Стандартная таблица. Минимизируем код. Пример#8
Стандартная таблица. Минимизируем код.
В этом примере сделан компонент 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 гибкий инструмент.
Резюме
В этом примере создан компонент стандартной таблицы для отображения данных. Использование такого компонента минимизирует усилия для построения интерфейсов, делает их однотипными, стандартными и понятными для пользователя.
В следующем примере
Собственная функция динамической загрузки компонент.
Смотри также:
- 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
Архіви