Vue Slots for Advanced Display Customization

Vue Slots for Advanced Display Customization

We use Vue, which gives us access to one of the most powerful component customization tools — slots. Slots allow you to inject (or replace) parts of a component’s internal markup from the outside, exactly in the places explicitly exposed by the component.

The component passes data of the current record into the slot, and you can fully control how this data is rendered or extended without the need to recompile or modify the component itself.

Example:

<DownlineTable :treeId="0" :properties="[ 's.id', 'p.email', 'm.PV' ]">
  
  <template #s.id="{ value, item, p, r }">
    <div style="padding: 0.5em; font-weight: bold; white-space: nowrap; background-color: rgba(128, 128, 128, 0.1);">
      {{ value }}
    </div>
  </template>

  <template #p.email="{ value, item, p, r, t, te }">

    <div v-if="r('m.PV') > 100">
      Email will be displayed in green:
    </div>

    <span :style="{ color: r('m.PV') > 100 ? 'green' : 'red' }">
      email = {{ p('p.email') }}
      pv = {{ p('m.PV') }} = {{ value }}
    </span>

    <p>
      Dumping the entire value object of the current row
      to inspect available data:
      {{ item }}
    </p>

  </template>

</DownlineTable>

The example above overrides the default rendering logic of the s.id column in the DownlineTable component. Instead of displaying a plain number, the value is rendered inside a styled rectangular block.

Inside a slot, you can use the full power of Vue: v-if conditions, any HTML tags, computed logic, and more.

Each slot receives several parameters:

• value — the presentable value of the current table cell.
• item — a TableGridItem object. It is a JavaScript object where keys are property names of the current row, and values have the structure: { raw: ..., presentable: ... }.

This means that while rendering a single cell, you can freely use data from other cells of the same row.

The helper functions p and r are syntactic sugar for accessing presentable and raw values of any property from the current item.

The functions t and te are string template helpers. Instead of writing expressions like:

p('p.email') + ' blah ' + p('p.firstname')

You can construct strings in a cleaner way:

t('~~p.email~~blah~~p.firstname~~')

The template variables also include system-level fields, which are especially useful when building URLs:

return {
  site_language: currentLanguage,
  site_proto: proto,
  site_domain: domain,
  site_instance: instance,
  site_hostname: hostname,
  site_url: `${proto}//${hostname}`,
  site_enroll_url: `${proto}//${hostname}/${currentLanguage}/${registrationPath}`,
  site_sso_key: ssoKey,
};

The te function automatically wraps variable values with encodeURIComponent. When rendering URL parameters, always use te instead of t.

<a :href="te('http://shop.mlm-soft.com/?email=~~p.email~~&token=~~site_sso_key~~')">
  LINK
</a>

Important: Slot names must always be written in lowercase.

Incorrect:

<template #m.Downline="{ value }">

Correct:

<template #m.downline="{ value }">

In all other places, property names should preserve their original casing.