I'm trying to make Quasar table with button on every row, that open fit QMenu:
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.
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 🙂