在 element-ui 传输组件中使用 render-content 属性的自定义渲染不起作用

Question

我正在尝试将 title 属性添加到默认 span 标记，该标记用于传输组件的 element-ui 数据项呈现。

从文档中，我发现了 element-ui 组件的 render-content 属性。此属性被分配给自定义渲染函数。根据文档，可以修改此呈现函数以更改数据项的显示方式。所以这里是 Transfer 组件的 Vue 组件包装器的代码：

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 函数，位于使用上述模板的 class 中：

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

预期输出：它应该在每个数据项的标题属性中呈现具有标签值的数据项。

当前输出：仅显示没有标签或属性的复选框。

问题1：在element-ui的传输组件中为每个数据项添加标题的方法是否正确？

问题2：官方文档中提到：

In a real project, render-content will work if relevant dependencies are correctly configured.

除了我已经在做的事情之外，它还要求我做什么？

Answer 1

所以对我有用的是：

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

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

在 element-ui 传输组件中使用 render-content 属性 的自定义渲染不起作用

Custom rendering using render-content property in element-ui transfer component not working

element-ui

在 element-ui 传输组件中使用 render-content 属性的自定义渲染不起作用