我试图在 bootstrap-vue 表中创建一个插槽,以使用自定义组件呈现任何布尔值。
所以我有一个简单的表
<b-table :items="items" :fields="columns" >
</b-table>
现在,如果我想以特定方式渲染单个列,我必须使用插槽
<template v-slot:cell(active)="data" >
<my-component :item="data.item" />
</template>
它有效,因为我知道active
是一个布尔值。
我想概括这种行为,但我不能使用v-for
在模板中并且不能使用v-slot:cell(active)
如果不在模板上...想法是创建一个包含所有布尔字段的数组并对其进行迭代...但它不起作用..
像这样的东西
<template v-slot:cell(b)="data" v-for="b in booleanFields">
<my-component :item="data.item[b]" />
</template>
因为Vue支持动态插槽名称 https://v2.vuejs.org/v2/guide/components-slots.html#Dynamic-Slot-Names,您可以使用变量来设置插槽名称v-bind:[attributeName]="value" https://v2.vuejs.org/v2/guide/syntax.html#Dynamic-Arguments句法。
这样你就可以做类似的事情:
<template v-slot:['cell(' + b + ')']="data" v-for="b in booleanFields">
但使用引号是不可能的,因为动态参数表达式约束 https://v2.vuejs.org/v2/guide/syntax.html#Dynamic-Argument-Expression-Constraints。因此,您必须创建一个辅助方法来执行该连接。所以:
<template v-slot:[gomycell(b)]="data" v-for="b in booleanFields">
plus
methods: {
gomycell(key) {
return `cell(${key})`; // simple string interpolation
}
当然,您可以直接命名该方法gomycell
as cell
并像这样使用它v-slot:[cell(b)]="data"
(注意[]
s),但我留下了名字gomycell
因此,在这个示例中,可以更清楚地看出方法的名称是什么,方法的名称不是。
Demo:
这是一个小演示,展示了动态插槽名称 https://v2.vuejs.org/v2/guide/components-slots.html#Dynamic-Slot-Names用法,不是b-table
但我认为这足以表明这是可能的:
Vue.component('my-table', {
template: '#my-table',
})
new Vue({
el: '#app',
data: {
booleanFields: [true, false]
},
methods: {
gomycell(key) {
return `cell(${key})`;
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<my-table>
<template v-slot:[gomycell(b)]="data" v-for="b in booleanFields">
<h3>who? {{ data.is }}</h3>
</template>
</my-table>
</div>
<template id="my-table">
<div>
<div style="color:green"><slot name="cell(true)" v-bind="{is: 'true!'}"></slot></div>
<div style="color:red"><slot name="cell(false)" v-bind="{is: 'false!'}"></slot></div>
</div>
</template>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)