在v-槽中使用泛型值:头

Question

我尝试创建一个泛型的引导Vue表组件。对于HTML格式的字段标签，我尝试这样做：

<template v-for="field in fields" v-slot:head(field_name)>
  <span v-translate render-html="true" v-html="field.label"></span>
</template>

在这里，我的问题是，当我将v槽:head( field_name )放入时，field_name不是泛型的，而是接受为字符串的。因此，当我将field.key写到v槽:head时，我希望它检查field.key的值，而不是field.key作为值本身的值。

<template v-for="field in fields" v-slot:head(field.key)>
   <span v-translate render-html="true" v-html="field.label"></span>
</template>

有办法处理这件事吗？

Answer 1

动态插槽的语法是：

<template v-slot:[dynamicSlotName]>
  // ...
</template>

适用于你的案件：

<template v-for="field in fields" v-slot:[`head(${field.key})`]>
   <span v-translate render-html="true" v-html="field.label"></span>
</template>