javascript Bootstrap Vue 动态表模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52992604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Vue Dynamic table templating
提问by nebulousGirl
I am working with Bootstrap Vue JS table component to create a datatable: https://bootstrap-vue.js.org/docs/components/table
我正在使用 Bootstrap Vue JS 表组件来创建数据表：https: //bootstrap-vue.js.org/docs/components/table
I am new to VueJS and am uncertain on how to approach this problem which makes searching for a solution even more complicated.
我是 VueJS 的新手，不确定如何解决这个问题，这使得寻找解决方案变得更加复杂。
I use an API endpoint to return JSON data:
我使用 API 端点返回 JSON 数据：
{
"options":{
"filter":false
},
"fields":[
{
"key":"id",
"label":"Id",
"editLink":false,
"display":true,
"sortable":true,
"class":"shrink"
},
{
"key":"name",
"label":"Name",
"editLink":true,
"display":true,
"sortable":true
}
],
"data":[ ]
}
Here is my table template:
这是我的表格模板：
<b-table striped hover bordered foot-clone class="table-sm"
:items="users" :fields="displayedFields" :per-page="perPage" :current-page="currentPage" :filter="filter"
@filtered="onFiltered"
>
<template v-for="(field, index) in fields">
<template slot="{{field.key}}" slot-scope="row" v-if="field.editLink">
<router-link :to="'/user/' + row.item.id" v-bind:key="index"></router-link>
</template>
</template>
<template slot="status" slot-scope="row">
<toggle-button :width="36" :height="18" v-model="row.status" :labels="false" :colors="{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}"/>
</template>
</b-table>
The first template tag is an attempt from a wild guess. I want to be able to conditionally select a table for a column from the fields config. You can see in my attempt that I want to put a RouterLink when the field's config editLink is true.
第一个模板标签是一个疯狂猜测的尝试。我希望能够有条件地从字段配置中为一列选择一个表。您可以在我的尝试中看到，当字段的配置 editLink 为 true 时，我想放置一个 RouterLink。
How can I get this done?
我怎样才能做到这一点？
采纳答案by nardnob
Here's a jsfiddle showing dynamic columns with a b-table: https://jsfiddle.net/nardnob/wvk6fxgt/
这是一个显示带有 b 表的动态列的 jsfiddle：https://jsfiddle.net/nardnob/wvk6fxgt/
new Vue({
el: "#app",
data: {
fields: [{
key: "id",
label: "Id",
colType: "span"
}, {
key: "name",
label: "Name",
colType: "button"
}, {
key: "uhh",
label: "uhh..",
colType: "idk"
}],
items: [{
id: 0,
name: "Test 0"
}, {
id: 1,
name: "Test 1"
}, {
id: 2,
name: "Test 2"
}]
}
});<div id="app">
<b-table :items="items" :fields="fields">
<template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
<div v-if="field.colType === 'button'">
<h5>{{data.item.name}}</h5>
<b-button>Am Button</b-button>
</div>
<div v-else-if="field.colType === 'span'">
<h5>{{data.item.name}}</h5>
<span>Am Span</span>
</div>
<div v-else>
<h5>{{data.item.name}}</h5>
Am Confused
</div>
</template>
</b-table>
</div>回答by Hiws
If you're using version 2.0.0 or newer of bootstrap-vueyou need to change the slot names as
they've changed, and the old vue slot has also been deprecated in favor for v-slot.
如果您使用的是 2.0.0 或更高版本，则bootstrap-vue需要更改插槽名称，因为它们已更改，并且旧的 vue 插槽也已被弃用，以支持v-slot.
I changed the accepted answers fiddle to work with the new naming and v-slot
我改变了接受的答案小提琴以使用新的命名和 v-slot
