Bootstrap Vue 动态表格模板化

Question

我正在使用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。您可以看到我的尝试。我该如何完成这个任务？

- nebulousGirl

Answer 1

如果您正在使用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>

- Hiws

Answer 2

这里有一个 jsfiddle 示例，展示了使用 b-table 实现动态列的功能： 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>

- nardnob

---

不幸的是，似乎这个功能无法正常工作 - 在某些更新后停止工作了？ 只有明确命名的字段才会被渲染。 - Radek Svítil

工作中的JSFiddle（bootstrap-vue.js设置为此答案发布时的版本）：https://jsfiddle.net/judh95fp/1/ - Matty J