vue-table, примеры

 

Полная таблица, шаблон по умолчанию

Исходный код:

 
   1. <vue-table
   2.     id="first"
   3.     :sync-url="'api.php'"
   4.     :filter-components="[
   5.     {
   6.         field: 'name',
   7.         label: 'Имя',
   8.         component: 'FilterInput'
   9.     }
  10.     ]"
  11.     :mass-operation-components="[
  12.     {
  13.         operation: 'operationName',
  14.         component: 'SumSelectedButton',
  15.         props: {label: 'Показать выбранные'}
  16.     }
  17.     ]"
  18.     :cell-components="[
  19.     {
  20.         label: '#',
  21.         component: 'CheckboxCell',
  22.         massOperation: 'selected',
  23.         attrs: {
  24.             width: '1%'
  25.         }
  26.     },
  27.     {
  28.         field: 'id',
  29.         label: 'ID',
  30.         component: 'string-cell'
  31.     },
  32.     {
  33.         field: 'name',
  34.         label: 'Название',
  35.         props: {
  36.             link: function(item) { return 'detail.php?id='+item.id; }
  37.         },
  38.         component: 'string-cell'
  39.     },
  40.     {
  41.         field: 'price',
  42.         label: 'Цена',
  43.         component: 'string-cell'
  44.     },
  45.     {
  46.         field: 'qty',
  47.         label: 'Кол-во',
  48.         component: 'string-cell'
  49.     }
  50.     ]"
  51. ></vue-table>
 

Кастомизация шаблонов

Исходный код:

 
   1. <vue-table
   2.     id="second"
   3.     :sync-url="'api.php'"
   4.     :templates-order="['filters', 'pagination', 'list']"
   5.     :cell-components="[
   6.     {
   7.         field: 'id',
   8.         label: 'ID',
   9.         component: 'string-cell'
  10.     },
  11.     {
  12.         field: 'name',
  13.         label: 'Название',
  14.         component: 'string-cell'
  15.     },
  16.     {
  17.         field: 'price',
  18.         label: 'Цена',
  19.         component: 'string-cell'
  20.     },
  21.     {
  22.         field: 'qty',
  23.         label: 'Кол-во',
  24.         component: 'string-cell'
  25.     }
  26.     ]"
  27. ></vue-table>
 

Измененный порядок вывода шаблонов

Исходный код:


   1.     <vue-table
   2.             id="third"
   3.             :sync-url="'api.php'"
   4.             :templates-order="['filters', 'list',  'pagination']"
   5.             :cell-components="[
   6.     {
   7.         field: 'id',
   8.         label: 'ID',
   9.         component: 'string-cell'
  10.     },
  11.     {
  12.         field: 'name',
  13.         label: 'Название',
  14.         component: 'string-cell'
  15.     },
  16.     {
  17.         field: 'price',
  18.         label: 'Цена',
  19.         component: 'string-cell'
  20.     },
  21.     {
  22.         field: 'qty',
  23.         label: 'Кол-во',
  24.         component: 'string-cell'
  25.     }
  26.     ]"
  27.     ></vue-table>

Пагинация показать еще

Исходный код:


   1.     <vue-table
   2.         id="appendpagination"
   3.         :sync-url="'api.php'"
   4.         :pagination-append-mode="true"
   5.         :templates-order="['list',  'pagination']"
   6.         :cell-components="[
   7.     {
   8.         field: 'id',
   9.         label: 'ID',
  10.         component: 'string-cell'
  11.     },
  12.     {
  13.         field: 'name',
  14.         label: 'Название',
  15.         component: 'string-cell'
  16.     },
  17.     {
  18.         field: 'price',
  19.         label: 'Цена',
  20.         component: 'string-cell'
  21.     },
  22.     {
  23.         field: 'qty',
  24.         label: 'Кол-во',
  25.         component: 'string-cell'
  26.     }
  27.     ]"
  28.     ></vue-table>

 

© 2020