Bootstrap-vue b-table：如何为非活动行设置 css-Class？

Question

我正在使用 vue2 和 bootstrap-vue。实际上我有一个带有一些字段的b 表。其中一个字段是带有布尔值（真/假）的“已发布”。我想在每一行都有一个css 类，其中字段 'released' 的值为 false。例如，用另一种文本颜色显示该行处于非活动状态。

我怎样才能做到这一点？我在 bootstrap-vue 的文档中没有找到解决方案。有人有想法吗？（这是我在这里的第一个问题，如果可能难以理解，请见谅）

示例（只有第 2 项的行应该在表格行上获得一个 css-class，因为它没有被释放）：

...
<b-table stacked="md" :items="items" :fields="fields" >
...


<script>
...

export default {
  data () {
    return {
        fields: {
            {
              key: 'id',
              label: 'ID',
              sortable: true,
              class: 'Left',
            },
            {
              key: 'name',
              label: 'Name',
              sortable: true,
              class: 'Left'
            },
            {
              key: 'released',
              label: 'Freigegeben',
              sortable: true,
              class: 'Left'
            },
        },
        items: [
            {
              id: '1',
              name: 'nameA',
              released: true,
            },
            {
              id: '2',
              name: 'nameB',
              released: false,
            },
            {
              id: '3',
              name: 'nameC',
              released: true,
            },
            {
              id: '4',
              name: 'nameD',
              released: true,
            },

        ],

    },
  }
  ...
}

Answer 1

BootstrapVue<b-table>提供了tbody-tr-class将类应用于行的 prop ，它接受字符串类名、类名数组或函数。

您想要做的是使用函数语法检查每一行上的数据，并根据行数据中的值返回一个类（为每一行调用该函数）。

https://bootstrap-vue.js.org/docs/components/table#row-styling

所述函数传递两个参数：item（行项目数据对象，如果它是一个数据行）, and类型(which is a string specifying the type of row being rendered:行for data rows, and other values if not a data row. In your case you are interested in therow`类型）。

<template>
  <b-table :items="items" :fields="fields" :tbody-tr-class="rowClass">
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      items: [ ... ],
      fields: [ ... ]
    }
  },
  methods: {
    // ...
    rowClass(item, type) {
      if (item && type === 'row') {
        if (item.released === true) {
          return 'text-success'
        } else {
          return 'text-secondary'
        } 
      } else {
        return null
      }
    }
  }
}
<script>

在本例中，我使用 Bootstrap文本颜色实用程序类，但您可以改用表变体实用程序类，例如table-success和table-light来更改行的背景颜色。

https://bootstrap-vue.js.org/docs/reference/color-variants#table-variants

Answer 2

你应该使用computed来计算fields

\n\n

下面的代码是我的想法\xef\xbc\x8cno验证

\n\n

...\n<b-table stacked="md" :items="items" :fields="fields" >\n...\n\n\n<script>\n...\n\nexport default {\n  data () {\n    return {\n        items: [\n            {\n              id: \'1\',\n              name: \'nameA\',\n              released: true,\n            },\n            {\n              id: \'2\',\n              name: \'nameB\',\n              released: false,\n            },\n            {\n              id: \'3\',\n              name: \'nameC\',\n              released: true,\n            },\n            {\n              id: \'4\',\n              name: \'nameD\',\n              released: true,\n            },\n        ],\n    },\n    computed: {\n        fields(){\n            let emptyArr = []\n                this.items.map(item => {\n                let keys = Object.keys(item)\n                let key = \'\'\n                if(item.released) {\n                    emptyArr.push({\n                        key: keys[0],\n                        label: keys[2]=== \'released\' ? \'Freigegeben\' : \n                        keys[0].toUpperCase(),\n                        sortable: true,\n                        class: \'Left\'\n                })} else {\n                    emptyArr.push({\n                        key: keys[0],\n                        label: keys[2]=== \'released\' ? \'Freigegeben\' : \n                        keys[0].toUpperCase(),\n                        sortable: true,\n                        class: \'\' //when release is false\n                })}\n            })\n            return emptyArr\n        }\n     }\n  ...\n}\n

\n