如何在渲染函数中使用createElement创建Vuetity徽章和图标

Question

在我的Vue应用程序中，我使用v-data-table，列值使用功能组件内的渲染函数进行渲染，如

render(createElement) {
if (this.$props.format) {
return this.$props.format(this.item, this.index, createElement);
}
return createElement('div', this.getText());
},

然后在我的format函数(它是一个单独文件中对象的一部分(中，您可以使用createElement创建一个hTML元素并返回它

format: (template, index, createElement) => {
const captureType = template.captureType === 'passphrase' ? 'voice' : template.captureType;
return createElement('div', captureType);
},

因此，我正在尝试做一些相当复杂的事情，那就是一个带徽章的Vuetify图标。这是Vuetify文档中的代码。

<v-badge left>
<template v-slot:badge>
<span>6</span>
</template>
<v-icon
large
color="grey lighten-1"
>
shopping_cart
</v-icon>
</v-badge>

作为一个起点，我可以创建基本的徽章HTML刚刚好

format: (item, index, createElement) => {
const propsObj = {
attrs: {
color: 'blue',
},
props: {
overlap: true,
left: true,
},
slots: {
badge: 'dummy',
},
};
return createElement('v-badge', propsObj, [createElement('v-icon', { attrs: { color: 'success', large: true } }, 'account_circle')]);
},

这让我几乎做到了，因为它显示了我的图标，并用badge元素包裹，尽管没有显示徽章内容：

<span class="v-badge v-badge--left v-badge--overlap">
<i aria ....>account_circle></a>
</span>

我的问题是获取badge插槽的显示值。我错过了什么？

Answer 1

在一个朋友的帮助下，我成功了。这是最后的代码：

format: (item, index, createElement) => {
const propsObj = {
props: {
overlap: true,
left: true,
color: 'success',
},
};
const icon = createElement('v-icon', { props: { color: 'success', large: true } }, 'account_circle');
const span = createElement('span', { slot: 'badge' }, '5');
return createElement('v-badge', propsObj, [span, icon]);
},

这个想法是，我把它分解成更小的块，模仿我试图创建的结构。在这种情况下，它基本上是一个包含两个子元素的v-badge：badge槽和v-icon元素。我将适当的配置选项传递给每个子元素，然后将两个渲染的元素传递给父元素v-badge的createElement。