我创建了一个显示各个页面的表格数据的组件。该组件在内部使用b-table。现在对于几个页面,我想自定义一些列的呈现,并且引导表允许使用具有特殊语法的范围字段槽:
<template #cell(field)="data">
{{ data.item.value }}
</template>
其中字段 - 列名,来自我的列数组,以及 data.item - 要呈现的单元格项目。
问题是我对不同的页面有不同的字段,所以这个自定义应该来自父组件,并且这些模板应该是动态创建的。
以下是我尝试解决的方法:
通过属性传递给 MyTableComponent 一个具有可自定义字段和唯一插槽名称的数组在 MyTableComponent 中动态创建自定义模板,并在内部动态创建命名插槽
从父传递槽数据到命名槽
我的表组件:
<b-table>
<template v-for="slot in myslots" v-bind="cellAttributes(slot)">
<slot :name="slot.name"></slot>
</template>
</b-table>
<script>
...
computed: {
cellAttributes(slot) {
return ['#cell(' + slot.field + ')="data"'];
}
}
...
</script>
家长:
<MyTableComponent :myslots="myslots" :items="items" :fields="fields">
<template slot="customSlot1">
Hello1
</template>
<template slot="customSlot1">
Hello2
</template>
</MyTableComponent>
<script>
...
items: [...my items...],
fields: [...my columns...],
myslots: [
{ field: "field1", name: "customSlot1" },
{ field: "field2", name: "customSlot2" }
]
...
</script>
不幸的是,b-table组件只是忽略了我的自定义插槽,就像没有提供它们一样。如果我直接在 MyTableComponent 中指定它,它会起作用:
<b-table>
<template #cell(field1)="data">
{{ data.item.value }}
</template>
</b-table>
但我需要它通过组件属性动态完成。请帮忙。