[英]Bootstrap Vue Dynamic table templating
我正在使用 Bootstrap Vue JS 表组件来创建数据表: https : //bootstrap-vue.js.org/docs/components/table
我是 VueJS 的新手,不确定如何解决这个问题,这使得寻找解决方案变得更加复杂。
我使用 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":[ ]
}
这是我的表格模板:
<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>
第一个模板标签是一个疯狂猜测的尝试。 我希望能够有条件地从字段配置中为列选择一个表。 您可以在我的尝试中看到,当字段的配置 editLink 为 true 时,我想放置一个 RouterLink。
我怎样才能做到这一点?
如果您使用的是 2.0.0 或更高版本的bootstrap-vue
您需要更改插槽名称,因为它们已更改,并且旧的 vue 插槽也已被弃用,以支持v-slot
。
我改变了接受的答案小提琴以使用新的命名和 v-slot
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" }] } });
<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://unpkg.com/bootstrap-vue@2.0.0/dist/bootstrap-vue.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.0.0/dist/bootstrap-vue.js"></script> <div id="app"> <b-table :items="items" :fields="fields"> <template v-for="(field, index) in fields" v-slot:[`cell(${field.key})`]="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>
这是一个显示带有 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.