quasar-frameworkquasar

Quasar QTable, show fit QMenu for every row, opened by button


I'm trying to make Quasar table with button on every row, that open fit QMenu:

Example screenshot

It works but I need to open QMenu only by button click.

<template v-slot:body-cell-name="props" >
    <q-td :props="props">
        <q-btn icon="menu" @click="" dense flat></q-btn>
    </q-td>
    <q-menu fit>
        Blah Blah Blah<br>
        Blah Blah Blah<br>
        Blah Blah Blah
    </q-menu>
</template>

Here's my code - https://codepen.io/TwentySix26/pen/BaejQGP

If QMenu placed inside a button it's opening without fit to current table row.


Solution

  • I found a solution:

    <!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="initial-scale=1, maximum-scale=1">
            <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@2.11.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
        </head>
        <body>
            <div id="q-app">
                <div class="q-pa-md">
                    <q-table title="Treats" :rows="rows" :columns="columns" row-key="name" >
                        <template v-slot:body-cell-menu="props" >
                            <q-td :props="props">
                                <q-btn icon="menu" @click="props.row.open = true" dense flat></q-btn>
                            </q-td>
                            <q-menu v-model = "props.row.open" no-parent-event fit>
                                Blah Blah Blah<br>
                                Blah Blah Blah<br>
                                Blah Blah Blah
                            </q-menu>
                        </template>
                    </q-table>
                </div>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.umd.prod.js"></script>
            <script>
                const app = Vue.createApp({
                    data() {
                        return {
                            columns: [
                                { name: "menu", align: "left", label: "Menu" },
                                { name: 'name', align: "left", label: "Name", field: "name", sortable: true },
                                { name: 'size', align: "left", label: 'Size', field: 'size', sortable: true },
                                { name: 'date', align: "left", label: 'Date', field: 'date', sortable: true }
                            ],
                            rows: [
                                { open: false, name: 'aaa', size: 1, date: "01.01.01" },
                                { open: false, name: 'bbb', size: 2, date: "02.02.02" },
                                { open: false, name: 'ccc', size: 3, date: "03.03.03" }
                            ]
                        }
                    }
                })
                app.use(Quasar)
                app.mount('#q-app')
                app.config.devtools = true;
            </script>
        </body>
    </html>
    

    Maybe it helps someone 🙂