时间戳

首页 > 解决方案 > 使用引导程序在表中显示数据

javascript - 使用引导程序在表中显示数据

问题描述

在 Vue js 中使用引导程序在表中显示数据

我获得了使用 bootstrap 在表格中显示它们所需的资源。目前我已经在图像中的 scss 中完成了它

在此处输入图像描述

我不是 JS 或 VUE 程序员，但我必须快速编写一些东西

 resources: [{
        id: 1,
        name: 'Surowiec 1',
        monthlyState: {
          january: 120,
          february: 280,
          march: 45,
          april: 40,
          may: 35,
          august: 60,
          september: 65,
          october: 75,
          november: 80,
          december: 20
        }
      }, {
        id: 2,
        name: 'Surowiec 2',
        monthlyState: {
          february: 280,
          march: 45,
          april: 40,
          may: 35,
          june: 37,
          july: 40,
          august: 60,
          september: 65,
          october: 75,
          november: 80,
          december: 20
        }
      }, {
        id: 3,
        name: 'Surowiec 3',
        monthlyState: {
          january: 120,
          february: 280,
          march: 45,
          april: 40,
          may: 35,
          june: 37,
          july: 40,
          august: 60,
          september: 65,
          october: 75,
          november: 80,
          december: 20
        }
      }],
    }),

现在我只有这个

   <template>
      <div>
        <b-table :fields="fields" :items="resources">
    
        </b-table>
      </div>
    </template>
....
    fields() {
     
    },

标签： javascriptvue.jsbootstrap-vue

解决方案

准备您的数据以进行演示 - 在这种情况下，最好的方法是使用computed值：

new Vue({
  el: "#app",
  data() {
    return {
      resources: [{
        id: 1,
        name: 'Surowiec 1',
        monthlyState: {
          january: 120,
          february: 280,
          march: 45,
          april: 40,
          may: 35,
          august: 60,
          september: 65,
          october: 75,
          november: 80,
          december: 20
        }
      }, {
        id: 2,
        name: 'Surowiec 2',
        monthlyState: {
          february: 280,
          march: 45,
          april: 40,
          may: 35,
          june: 37,
          july: 40,
          august: 60,
          september: 65,
          october: 75,
          november: 80,
          december: 20
        }
      }, {
        id: 3,
        name: 'Surowiec 3',
        monthlyState: {
          january: 120,
          february: 280,
          march: 45,
          april: 40,
          may: 35,
          june: 37,
          july: 40,
          august: 60,
          september: 65,
          october: 75,
          november: 80,
          december: 20
        }
      }],
      tableFields: [
        "name",
        "january",
        "february",
        "march",
        "april",
        "may",
        "june",
        "july",
        "august",
        "september",
        "october",
        "november",
        "december",
      ]
    }
  },
  computed: {
    tableItems() {
      return this.resources.map(({
        name,
        monthlyState
      }) => ({
        name,
        ...monthlyState
      }))
    },
  },
  template: `
  <b-container>
    <b-row>
      <b-col>
        <b-table
          :fields="tableFields"
          :items="tableItems"
        />
      </b-col>
    </b-row>
  </b-container>
  `
})
<!-- Add this to <head> -->

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app"></div>

推荐阅读