Reusable QPopupEdit?

SuspiOwl

I have a table with 16 columns and 100 rows, each of the cell are editable using QPopupEdit, however the table become slower to load if I added QPopUpEdit on each q-td (like the example from the doc). I tried to remove the <q-popup-edit> on the for looped <q-td> and it loads way faster so the QPopupEdit is most likely the issue.

I also added q-menu on each cell so I can right click on each cell to show different menu, was having the same issue and it causes the table become slower to load, so I implemented reusable menu like the example from doc by giving each cell its unique ID and use target on the q-menu, and the table loaded significantly faster

I wonder if I can do the same thing in QPopupEdit like I did in QMenu.

Mila76

I’m working on this too…
For now i used target like in qmenu:
Outside qtable:

<q-popup-edit v-model="valEdit" :target="targetEdit">
  <q-input type="number" v-model="valEdit" dense autofocus></q-input>
</q-popup-edit>

Inside:

<q-td
  :props="props"
  @click="e => (targetEdit = e.target)"
>{{ props.row.name }}</q-td>

But you need to click 2 times
One to set the target and one to show the popup
I need to fix this, maybe with some method

And obviusly a way to set wich row or cell i’m working on for @save

Mila76

First Step fix the double click problem:

<q-popup-edit ref="popupEdit" v-model="valEdit" :target="targetEdit">
  <q-input type="number" v-model="valEdit" dense autofocus></q-input>
</q-popup-edit>

<q-td
  :props="props"
  @click="(e) => showEdit(e, props.row)"
>{{ props.row.name}}</q-td>

Initial data:

valEdit: '',
targetEdit: true

Methods:

showEdit(event, row) {
  this.targetEdit = event.target;
  this.$refs.popupEdit.show(event);
}

Another bug… click on edit… save or hide popup… click in the same cell… nothing happen… only another cell.
But now my table end editing is fast.

nededa

@Mila76 have you tried using it inside td and adding v-if on input? Then use popup events show/hide to render it? Not sure why a lot of such components doesn’t come with active status inside slot prop then we wouldn’t need to add another var for every item and use like

<template v-slot:default="{active}">
 <q-input v-if="active" />
</template>

Then again it would be easy to make custom component for it.

Mila76

All my “bug” is fixed… Only one remain…
InitialValue reset…

Change 2 cell and if i put in both the same value the second dont trigger change or save at all. (same ad i dont change value at all)

You see here the problems: https://jsfiddle.net/xemyc427/11/

Any help?

Mila76

Here https://jsfiddle.net/xemyc427/20/ i fixed all my issues.
The example is not very good but is easy enough to understand how can be done

No More Posting New Topics!

Reusable QPopupEdit?