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