Question

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

我该如何实现？我在bootstrap-vue的文档中找不到解决方案。有人知道吗？（这是我的第一个问题，抱歉，如果可能难以理解）

示例（仅项目2的行应在表行上获取css类，导致其未发布）：

...
<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，该类接受字符串类名，类名数组或函数。

您要做的是使用syntac函数检查每一行的数据，然后根据行数据中的值返回一个类（每行都会调用该函数）。

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 the行`类型）

<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 text color utility classes，但是您可以改用表变量实用程序类，例如table-success和table-light来更改行的背景颜色。 / p>

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

Answer 2

您应该使用computed来计算fields

以下代码是我的想法，无需验证

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


<script>
...

export default {
  data () {
    return {
        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,
            },
        ],
    },
    computed: {
        fields(){
            let emptyArr = []
                this.items.map(item => {
                let keys = Object.keys(item)
                let key = ''
                if(item.released) {
                    emptyArr.push({
                        key: keys[0],
                        label: keys[2]=== 'released' ? 'Freigegeben' : 
                        keys[0].toUpperCase(),
                        sortable: true,
                        class: 'Left'
                })} else {
                    emptyArr.push({
                        key: keys[0],
                        label: keys[2]=== 'released' ? 'Freigegeben' : 
                        keys[0].toUpperCase(),
                        sortable: true,
                        class: '' //when release is false
                })}
            })
            return emptyArr
        }
     }
  ...
}

Bootstrap-Vue B表：如何为不活动的行设置CSS类？

2 个答案: