Nuxt•4mo ago

Example of Edit Dropdown

Hey'all, i'm currently looking for a UDropdown model to use in my table. the dropdown should have edit and delete options; edit should open the edit model declared on parent and delete should call delete function also on parent. I have few experience with nuxt3/composition api, how do you aproach this situations?

              <UTable
                  :columns="columnsTipoDocumento"
                  :rows="tiposDocumentos"
              >


                <template #st_descricao-data="{ row }">

                  <div class="flex items-center justify-between">
                    <span>{{ row.st_descricao }}</span>
                    <edicao-dropdown/>
                  </div>
                </template>
              </UTable>


//modal
  <tipo-documento @refresh-tipo-documento="refresh_tipo_documento()" v-model:form="selectedTipoDocumento" v-model:modal-state="modalTipoDocumentoState" />

              <UTable
                  :columns="columnsTipoDocumento"
                  :rows="tiposDocumentos"
              >


                <template #st_descricao-data="{ row }">

                  <div class="flex items-center justify-between">
                    <span>{{ row.st_descricao }}</span>
                    <edicao-dropdown/>
                  </div>
                </template>
              </UTable>


//modal
  <tipo-documento @refresh-tipo-documento="refresh_tipo_documento()" v-model:form="selectedTipoDocumento" v-model:modal-state="modalTipoDocumentoState" />

2 Replies

dwol•4mo ago

You'll need to use slots, like the example in the docs using the 'actions' column. https://ui.nuxt.com/components/table#column-data

Nuxt UI

Table - Nuxt UI

Display data in a table.

JonatasBrazOP•4mo ago

my problem is the dropdown itself. i'm trying to figure out how to make it reusable so i can open edit modal/delete of any future data with same dropdown

Gaming

Programming

Example of Edit Dropdown