Пользовательский рендеринг с использованием свойства render-content в компоненте передачи element-ui не работает

Question

Я пытаюсь добавить атрибут title к тегу span по умолчанию, который используется при визуализации элемента данных element-ui для компонента передачи.

Из документации я наткнулся на свойство render-content компонента element-ui. Это свойство присваивается пользовательской функции рендеринга. Согласно документам, эту функцию рендеринга можно изменить, чтобы изменить способ отображения элементов данных. Итак, вот код для оболочки компонента Vue для компонента Transfer:

base-transfer(
  ref="transfer"
  filterable
  v-bind:data="participantsSport"
  v-bind:filter-placeholder="$t('event.details.search')"
  v-bind:props="{key: 'uuid', label: 'name'}"
  v-bind:render-content="renderParticipants"
  v-model="participantsSelected")

А вот моя функция рендеринга, которая является публичной функцией в том же классе, где используется вышеуказанный шаблон:

public renderParticipants(h, option: {key: string; label: string}): string {
  return `
    <span title = ${option.label}>
      ${option.key} - ${option.label}
    </span>
  `;
}

Ожидаемый результат: он должен отображать элементы данных со значением метки в атрибуте title для каждого элемента данных.

Текущий вывод: отображаются только флажки без метки или атрибута.

Вопрос 1: Это правильный способ добавления заголовка для каждого элемента данных в компоненте передачи element-ui?

Вопрос 2: В официальном документе упоминается:

В реальном проекте render-content будет работать, если соответствующие зависимости настроены правильно.

Что требуется от меня в дополнение к тому, что я уже делаю?

Answer 1

Так что у меня получилось так:

  public renderParticipants(
    h: CreateElement,
    option: { name: string }): VNode {

    return h('span', { attrs: { title: option.name } }, option.name);
  }