Quasar - популярная библиотека пользовательского интерфейса Vue для разработки красивых приложений Vue.
В этой статье мы рассмотрим, как создавать приложения Vue с помощью библиотеки Quasar UI.
Таблица стилей сетки
Мы можем добавить таблицу в виде сетки в наше приложение Vue с помощью компонента Quasar q-table
.
Например, мы можем написать:
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css" /> </head> <body class="body--dark"> <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script> <div id="q-app"> <q-layout view="lHh Lpr lFf" container style="height: 100vh;" class="shadow-2 rounded-borders" > <div class="q-pa-md"> <q-table grid title="Treats" :data="data" :columns="columns" row-key="name" :filter="filter" hide-header > <template v-slot:top-right> <q-input borderless dense debounce="300" v-model="filter" placeholder="Search" > <template v-slot:append> <q-icon name="search"></q-icon> </template> </q-input> </template> </q-table> </div> </q-layout> </div> <script> const columns = [ { name: "name", required: true, label: "Dessert", align: "left", field: (row) => row.name, format: (val) => `${val}`, sortable: true }, { name: "calories", align: "center", label: "Calories", field: "calories", sortable: true }, { name: "fat", label: "Fat (g)", field: "fat", sortable: true }, { name: "calcium", label: "Calcium (%)", field: "calcium", sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) } ]; const data = [ { name: "Frozen Yogurt", calories: 159, fat: 6.0, calcium: "14%" }, { name: "Ice cream sandwich", calories: 237, fat: 9.0, calcium: "8%" }, { name: "Eclair", calories: 262, fat: 16.0, calcium: "6%" }, { name: "Honeycomb", calories: 408, fat: 3.2, calcium: "0%" }, { name: "Donut", calories: 452, fat: 25.0, calcium: "2%" }, { name: "KitKat", calories: 518, fat: 26.0, calcium: "12%" } ]; new Vue({ el: "#q-app", data: { columns, data, filter: "" } }); </script> </body> </html>
Мы добавляем опору grid
, чтобы превратить таблицу в сетку, где данные каждой строки отображаются в отдельной ячейке.
Свойство filter
принимает реактивное свойство строки.
Мы помещаем q-input
в слот top-right
, чтобы добавить поле поиска в правый верхний угол.
Когда мы вводим некоторые ключевые слова в поле поиска, фильтрация будет выполняться автоматически.
Стиль карточек сетки можно изменить с помощью свойства card-class
:
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css" /> </head> <body class="body--dark"> <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script> <div id="q-app"> <q-layout view="lHh Lpr lFf" container style="height: 100vh;" class="shadow-2 rounded-borders" > <div class="q-pa-md"> <q-table grid card-class="bg-primary text-white" title="Treats" :data="data" :columns="columns" row-key="name" :filter="filter" hide-header > <template v-slot:top-right> <q-input borderless dense debounce="300" v-model="filter" placeholder="Search" > <template v-slot:append> <q-icon name="search"></q-icon> </template> </q-input> </template> </q-table> </div> </q-layout> </div> <script> const columns = [ { name: "name", required: true, label: "Dessert", align: "left", field: (row) => row.name, format: (val) => `${val}`, sortable: true }, { name: "calories", align: "center", label: "Calories", field: "calories", sortable: true }, { name: "fat", label: "Fat (g)", field: "fat", sortable: true }, { name: "calcium", label: "Calcium (%)", field: "calcium", sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) } ]; const data = [ { name: "Frozen Yogurt", calories: 159, fat: 6.0, calcium: "14%" }, { name: "Ice cream sandwich", calories: 237, fat: 9.0, calcium: "8%" }, { name: "Eclair", calories: 262, fat: 16.0, calcium: "6%" }, { name: "Honeycomb", calories: 408, fat: 3.2, calcium: "0%" }, { name: "Donut", calories: 452, fat: 25.0, calcium: "2%" }, { name: "KitKat", calories: 518, fat: 26.0, calcium: "12%" } ]; new Vue({ el: "#q-app", data: { columns, data, filter: "" } }); </script> </body> </html>
Заключение
Компонент Quasar q-table
может быть отображен в виде сетки с данными строк, отображаемыми в каждой ячейке сетки.