Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Custom Edit Popup
We can add icons and buttons into the custom edit popup.
For instance, we can write:
<!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/quasar@1.12.13/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/quasar@1.12.13/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
:data="data"
:columns="columns"
title="QDataTable with QPopupEdit"
:rows-per-page-options="[]"
row-key="name"
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="desc" :props="props">
{{ props.row.name }}
<q-popup-edit
buttons
v-model="props.row.name"
title="Edit the Name"
>
<q-input v-model="props.row.name" dense autofocus counter>
<template v-slot:append>
<q-icon name="edit"></q-icon>
</template>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="calories" :props="props">
{{ props.row.calories }}
<q-popup-edit v-model.number="props.row.calories">
<q-input
type="number"
v-model.number="props.row.calories"
dense
autofocus
>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="fat" :props="props">
{{ props.row.fat }}
<q-popup-edit v-model.number="props.row.fat">
<q-input
type="number"
v-model.number="props.row.fat"
dense
autofocus
>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="carbs" :props="props">
{{ props.row.carbs }}
<q-popup-edit v-model.number="props.row.carbs" disable>
<q-input
type="number"
v-model.number="props.row.carbs"
dense
autofocus
>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="protein" :props="props">
{{ props.row.protein }}
<q-popup-edit v-model.number="props.row.protein">
<q-input
type="number"
v-model.number="props.row.protein"
dense
autofocus
>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="sodium" :props="props">
{{ props.row.sodium }}
<q-popup-edit v-model.number="props.row.sodium">
<q-input
type="number"
v-model.number="props.row.sodium"
dense
autofocus
>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="calcium" :props="props">
{{ props.row.calcium }}
<q-popup-edit v-model="props.row.calcium">
<template v-slot:title>
<div class="text-italic text-primary">
My Custom Title
</div>
</template>
<q-input v-model="props.row.calcium" dense autofocus />
</q-popup-edit>
</q-td>
<q-td key="iron" :props="props">
{{ props.row.iron }}
<q-popup-edit v-model="props.row.iron">
<q-input v-model="props.row.iron" dense autofocus />
</q-popup-edit>
</q-td>
</q-tr>
</template>
</q-table>
</div>
</q-layout>
</div>
<script>
const columns = [
{
name: "desc",
align: "left",
label: "Dessert (100g serving)",
field: "name"
},
{
name: "calories",
align: "center",
label: "Calories",
field: "calories"
},
{ name: "fat", label: "Fat (g)", field: "fat" },
{ name: "carbs", label: "Carbs (g)", field: "carbs" }
];
const data = [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0
}
];
new Vue({
el: "#q-app",
data: {
data,
columns
}
});
</script>
</body>
</html>
We populate the icon in the append slot of q-icon to add the icons.
And we add the buttons prop to the q-popup-edit component to add the Cancel and Set buttons.
This is done in:
<q-td key="desc" :props="props">
{{ props.row.name }}
<q-popup-edit buttons v-model="props.row.name" title="Edit the Name">
<q-input v-model="props.row.name" dense autofocus counter>
<template v-slot:append>
<q-icon name="edit"></q-icon>
</template>
</q-input>
</q-popup-edit>
</q-td>
Conclusion
We can add icons and buttons in the table cell edit popup with Quasar.
