时间戳

首页 > 解决方案 > 为什么引导表示例对我不起作用？

vue.js - 为什么引导表示例对我不起作用？

问题描述

我有一个像这个引导表这样的表的项目。

代码沙盒

模板：

<b-table small :fields="fields" :items="items">
      <template v-slot:cell(index)="data">
        {{ data.index + 1 }}
      </template>

      <!-- A custom formatted column -->
      <template v-slot:cell(name)="data">
        <b class="text-info">{{ data.value.last.toUpperCase() }}</b>, <b>{{ data.value.first }}</b>
      </template>

      <!-- A virtual composite column -->
      <template v-slot:cell(nameage)="data">
        {{ data.item.name.first }} is {{ data.item.age }} years old
      </template>

      <!-- Optional default data cell scoped slot -->
      <template v-slot:cell()="data">
        <i>{{ data.value }}</i>
      </template>
    </b-table>

和脚本：

fields: [
          // A virtual column that doesn't exist in items
          'index',
          // A column that needs custom formatting
          { key: 'name', label: 'Full Name' },
          // A regular column
          'age',
          // A regular column
          'sex',
          // A virtual column made up from two fields
          { key: 'nameage', label: 'First name and age' }
        ],
        items: [
          { name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
          { name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
          { name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
          { name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
        ]

引导表工作。我正在复制此代码并且示例不起作用。我不明白为什么。

问题：那么，为什么引导表示例不起作用？

标签： vue.jsbootstrap-vue

解决方案

你好，我也有同样的问题。我有一些自定义字段表，在 vue devtools 上已经看到了数据。在 vuex 绑定中。但是在自定义表上没有数据可以出现，只有可用的数据量。这是我的模板代码

<template>
  <div class="table-responsive">
    <b-table striped hover :items="todos.data" :fields="fields" show-empty>
      <template slot="jadwal" slot-scope="row">
        <td class="parent-row">{{ row.item.name }}</td>
      </template>
    </b-table>
  </div>
</template>

和这个对象 vuex 绑定

{"current_page":1,"data":[{"id":1,"name":"Belajar Vue Laravel","note":"Apa aja boleh deh ini deskripsinnya","due_date":"2019-09-30","status":0,"created_at":"2019-09-29 18:23:51","updated_at":"2019-09-29 18:23:51"},{"id":2,"name":"Belajar mengerti kamu","note":"you are my everythings","due_date":"2019-10-01","status":1,"created_at":"2019-09-29 18:23:51","updated_at":"2019-09-29 18:23:51"}],"first_page_url":"http://localhost:8000/api/todo?page=1","from":1,"last_page":1,"last_page_url":"http://localhost:8000/api/todo?page=1","next_page_url":null,"path":"http://localhost:8000/api/todo","per_page":10,"prev_page_url":null,"to":2,"total":2}

推荐阅读