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

23.03.2020

Скачать пример #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 гибкий инструмент.

Резюме

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

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

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

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

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

web-dev склерозник
Коментарі:

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

* - обов'язкові поля

Категорії

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

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

Архіви

Підписка