Vue шаг за шагом. Сортировка, поиск. Пример#6

18.03.2020

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

Сортировка, поиск

В этом примере продолжаем дорабатывать компонент client.

Добавлен компонент header-order. С его помощью заголовки таблицы могут быть сделаны «кликабельными» и при клике менять направление сортировки соответствующего столбца. Обратите внимание как этот компонент используется в компоненте client-table и как он работает со slot-тами.

Библиотека vue-material

Также добавлена библиотека vue-material. С ее помощью создан компонент table-menu. Этот компонент сожржит поле для фильтра/поиска и меню сортировки и сделан для того, чтобы его «приклеивать» ко всем таблицам. В нем будет не только поле поиска, но и меню со списком полей для сортировки и другие «плюшки» для мобильной версии. Но об этом в следующем примере.

Ссылки

Слоты: https://ru.vuejs.org/v2/guide/components-slots.html

vue-material: https://vuematerial.io/

Резюме

Сделана сортировка столбцов в таблице. Поиск/фильтрация данных. Пример использования библиотеки vue-material.

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

Адаптивный дизайн. Таблица - трансформер под настольные и мобильные устройства.

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

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

Web-dev склерозник
Коментарі:
Додати коментар
Code
* - обов'язкові поля

Категорії

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

Tags

st-link 3d-printer encoder servo solar java-script git wifi uart mpu-9250 sensors capture motor esp8266 nodemcu usb usart piezo rfid css atmega bmp280 bkp avr displays brushless watchdog battery sms rs-232 tim mpu-6050 barometer examples nvic pmsm dc-dc eb-500 soldering meteo rtc gpio books websocket docker dht11 led smd stm32 web timer dma lcd mpx4115a hih-4000 bldc ssd1306 adc mongodb python options eeprom raspberry-pi remap max1674 programmator ethernet foc ngnix ssd1331 gps flash exti bluetooth html bme280 i2c pwm flask

Архіви