使用引导程序在表中显示数据答案

【问题标题】：Displaying data in a table using bootstrap使用引导程序在表中显示数据
【发布时间】：2021-07-23 14:52:36
【问题描述】：

在 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() {
     
    },

【问题讨论】：

请分享您尝试过的代码？
好吧，我不知道如何显示这个。在我的基因中，我也有相同的月份（Lipiec，Sierpien），但我不知道如何显示列的名称（月份）和值 magazyn，potrzebne（这些是原材料及其库存。如何有多少原材料，需要多少，缺少多少）

标签： javascript vue.js bootstrap-vue

【解决方案1】：

准备您的数据以进行演示 - 在这种情况下，最好的方法是使用 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>

【讨论】：

【解决方案2】：

<template>
  <div>
    <div class="d-flex justify-content-center d-block p-2 bg-dark text-white" >
    </div>
    <b-container>
      <b-row>
        <b-col>
          <b-table :fields="tableFields" :items="tableItems">
            <template v-for="month in Object.keys(MonthEnum)" v-slot:[`cell(${month})`]="data">
              magazyn:  {{data.item[month]}}
            </template>
          </b-table>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>





export default {
      name: "ResourcesList",
      computed: {
        ...mapGetters(['resources', "productionPlans", 'products']),
        tableItems() {
          return this.resources.map(({name, monthlyState}) => ({
            name, ...monthlyState
          }))
        },
        tableFields() {
          return  ["name", ...Object.keys(MonthEnum)]
        }
      },
    
    
        data: () => ({
        MonthEnum,
      }),

【讨论】：