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. Финальный пример
Додати коментар
Недавні записи
- 🇺🇦 FOC Board STM32F103RB 🧩
- STM32 Motor control SDK - керування оборотами мотора за допомогою потенціометра 📑
- Flask✙Gunicorn✙Nginx➭😎
- STM32 Motor control SDK - програмне керування обертам мотора
- STM32 Motor control SDK - як створити перший проект
- Vue SVG. Приклад побудови живого параметричного креслення
- Вимірювання моменту мотора
- Vue SVG - компонент. Приклад 📑
- Flask + Vue 🏁 Финальный пример 🏁
- Flask, CORS, JSON-файл. Пример#6
Tags
bldc brushless stm32 motor web html css flask atmega foc git java-script pmsm raspberry-pi python websocket mongodb esp8266 nodemcu st-link tim timer docker ngnix programmator ssd1331 ssd1306 wifi uart meteo bme280 bmp280 i2c gps mpu-6050 mpu-9250 sensors 3d-printer options usb barometer remap watchdog flash eeprom rtc bkp encoder pwm servo capture examples dma adc nvic usart gpio books battery dc-dc sms max1674 avr lcd dht11 piezo rs-232 rfid solar exti bluetooth eb-500 displays ethernet led smd soldering mpx4115a hih-4000
Архіви