vue.js - 设置 Vue Bootstrap Table

问题描述

我需要一些想法来定制我的 Vue Boostrap 表。

我有一些数据，例如：

  const tasks = [
    {
      title: 'title 1',
      wbs: '0',
      description: '...'
    },
    {
      title: 'title 2',
      wbs: '1',
      description: '...'
    },
    {
      title: 'title 3',
      wbs: '1.1',
      description: '...'
    },
    {
      title: 'title 4',
      wbs: '1.1.1',
      description: '...'
    },
    {
      title: 'title 5',
      wbs: '1.2',
      description: '...'
    }
  ]

我的桌子：

     <b-table
        striped
        hover
        isRowHeader
        :responsive="'md'"
        :items="tasks"
        :fields="fields"
        :per-page="perPage"
        :current-page="currentPage"
      />

结束我的任务是从商店计算的：

computed: { ...mapGetters({ tasks: "getTasks" }) }

我需要根据 WBS 值自定义表格。将 _rowVariant 设置为 0 和 1 的“信息”，将“警告”设置为 1.1 和 1.2，将“危险”设置为其他人。并且还根据 WBS 大小在标题左侧添加合并。请给出一些想法来实现这一点。提前泰。

标签： vue.jsbootstrap-vue

我认为使用该tbody-tr-class属性是解决您问题的好方法。在我看来，使用的特性b-vue比使用其他方法增加代码的复杂性更好。

您可以查看此代码段以获取一个简单的示例：

new Vue({
  el: '#app',
  data() {
    return {
      fields: [{
          key: "title",
        },
        {
          key: "wbs",
          "tbody-tr-class": (type, key, item) => {
            return 'text-danger'
          }
        },
        {
          key: "description",
        }
      ],
      items: [{
          title: 'title 1',
          wbs: '0',
          description: '...'
        },
        {
          title: 'title 2',
          wbs: '1',
          description: '...'
        },
        {
          title: 'title 3',
          wbs: '1.1',
          description: '...'
        },
        {
          title: 'title 4',
          wbs: '1.1.1',
          description: '...'
        },
        {
          title: 'title 5',
          wbs: '1.2',
          description: '...'
        }
      ]
    }
  },
  methods: {

    rowClass(item, type) {
      if (item.wbs < 1.1) {
        return "table-info"
      } else if (item.wbs < 1.2) {
        return "table-warning"
      } else {
        return "table-danger"
      }
    }
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table hover :items="items" :tbody-tr-class="rowClass"></b-table>
</div>

vue.js - 设置 Vue Bootstrap Table _rowVariant 和行边距

问题描述

解决方案

推荐阅读