How to create a Column Template using Vue 3 SFC script setup

[Victor Labastida]

Hello 👋

How can I customize a Template column in the QueryBuilder for Vue 3 using SFC `<script setup>`? Do you have an example?

The examples I've found so far use the Options API or Composition API, but I need an example that uses SFC (Single File Component) `<script setup>`.

Thank you

[Keerthikaran Venkatachalam]

Hi Victor,

We have prepared the sample based on the requirements. The Syncfusion Vue components do support slots, which can help reduce the number of properties that need to be defined and increase the readability of the component. This is because using slots allows defining the content or behavior of the component in the parent component rather than in the component’s own code. This can make it easier to understand the purpose and functionality of the component at a glance and make the component more modular and flexible. Please refer to the code snippet and sample.

<ejs-querybuilder ref="querybuilderInstance" :dataSource="expenseData" :rule="importRules" width="70%">

              <e-columns>

                  <e-column field='Category' label='Category' type='string' />

                  <e-column field='PaymentMode' label='Payment Mode' type='string' :template="'paymentTemplate'">

                    <template v-slot:paymentTemplate="{data}">

                      <ejs-dropdownlist :change='fieldChange' :value="data.rule.value" :dataSource="ds">

                      </ejs-dropdownlist>

                    </template>

                  </e-column>

                  <e-column field='TransactionType' label='Transaction Type' type='boolean' />

                  <e-column field='Description' label='Description' type='string' />

                  <e-column field='Date' label='Date' type='date' />

                  <e-column field='Amount' label='Amount' type='number' />

              </e-columns>

          </ejs-querybuilder>

Ug Link: https://ej2.syncfusion.com/vue/documentation/common/template#slot-template

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: QueryBuilderVue3Template_f5cfd57e.zip