[Vuejs]-Custom Vue components inside editable Tabulator table cells

0👍

This is happening because you are trying to use Vue Components after Vue has parsed the DOM.

Vue will look for component tags when the DOM is first loaded, Instantiate each of the components and convert their tags into actual HTML from inside the components definition.

This only happens when the page is loaded, so when you are using a formatter and passing in a component you are just passing in standard HTML and that component tag isnt valid, therefore non of its functionality is triggered.

As far as i am aware there is no way to instantiate a component in that way after the page has loaded (i would very much love it if someone could prove me wrong on this)

Therefore any formatter that you want to set would need to use vanilla JavaScript, not a Vue component

-1👍

Para renderizar un componente en quasar realize lo siguiente,
Archivo TabulatorTemplate.js

import { createApp } from "vue/dist/vue.esm-bundler";
import { Quasar } from "quasar";

export function renderComp(comp, props) {
  const div = document.createElement("div");

  const app = createApp(comp, props);
  app.use(Quasar, {
    plugins: {}, // import Quasar plugins and add here
  });

  return app.mount(div).$el;
}

componente.

<script setup>
import { onMounted } from "vue";

const props = defineProps(["cell", "select"]);

onMounted(() => {
  console.log("props", props.cell);
});

function returnData() {
  return props.select(props.cell.value);
}
</script>

<template>
  <div>
    <q-btn
      color="primary"
      icon="check"
      label="OK"
      @click="returnData"
      size="sm"
    />
  </div>
</template>

<style scoped></style>

dentro del archivo

import { renderComp } from "src/utils/TabulatorTemplate";
import BtnTabulatorComp from "src/components/Tabla/BtnTabulatorComp.vue";

const columns = [{
    title: "Eliminar",
    field: "age",
    hozAlign: "center",
    formatter({ _cell }) {
      return renderComp(BtnTabulatorComp, {
        cell: _cell,
        select: (val) => _select(val),
      });
    },
    frozen: true,
  },
];

function _select(val) {
    console.log("Selectect props", val);
   }

enter image description here

Leave a comment