如何在Vue.js中使用Bootstrap实现resources数据的表格展示

你可以直接参考以下完整可运行的代码实现需求：

效果参考 #

完整代码实现 #

模板部分 #

<template>
  <div>
    <!-- 可添加striped、hover属性优化显示效果 -->
    <b-table :fields="fields" :items="resources" striped hover>
    </b-table>
  </div>
</template>

脚本部分（含fields配置） #

export default {
  data() {
    return {
      // 你的原有resources数据放在这里
      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
          }
        }
      ]
    }
  },
  computed: {
    fields() {
      return [
        // 第一列：资源名称
        {
          key: 'name',
          label: '资源名称'
        },
        // 12个月份列
        {
          key: 'january',
          label: '1月',
          formatter: (value, item) => item.monthlyState.january || 0
        },
        {
          key: 'february',
          label: '2月',
          formatter: (value, item) => item.monthlyState.february || 0
        },
        {
          key: 'march',
          label: '3月',
          formatter: (value, item) => item.monthlyState.march || 0
        },
        {
          key: 'april',
          label: '4月',
          formatter: (value, item) => item.monthlyState.april || 0
        },
        {
          key: 'may',
          label: '5月',
          formatter: (value, item) => item.monthlyState.may || 0
        },
        {
          key: 'june',
          label: '6月',
          formatter: (value, item) => item.monthlyState.june || 0
        },
        {
          key: 'july',
          label: '7月',
          formatter: (value, item) => item.monthlyState.july || 0
        },
        {
          key: 'august',
          label: '8月',
          formatter: (value, item) => item.monthlyState.august || 0
        },
        {
          key: 'september',
          label: '9月',
          formatter: (value, item) => item.monthlyState.september || 0
        },
        {
          key: 'october',
          label: '10月',
          formatter: (value, item) => item.monthlyState.october || 0
        },
        {
          key: 'november',
          label: '11月',
          formatter: (value, item) => item.monthlyState.november || 0
        },
        {
          key: 'december',
          label: '12月',
          formatter: (value, item) => item.monthlyState.december || 0
        }
      ]
    }
  }
}

实现说明 #

• fields数组按顺序定义了表格的所有列，每列的label属性对应表头显示的文字，可根据需求修改为英文月份名
• 月份列的formatter函数会自动从每行数据的monthlyState对象中读取对应月份的数值，若对应月份无数据则默认显示0，不会出现报错
• 如果需要调整表格样式，可直接在b-table标签上添加BootstrapTable支持的属性，比如边框、尺寸等

内容的提问来源于stack exchange，提问作者user14797575