8

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

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

示例（只有第 2 项的行应该在 table-row 上获得一个 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,
            },

        ],

    },
  }
  ...
}
4

2 回答 2

8

BootstrapVue<b-table>提供了将类应用于行的 prop 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文本颜色实用程序类，但您可以改用表格变体实用程序类，例如table-success更改table-light行的背景颜色。

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

于 2019-08-13T04:45:18.387 回答
-1

你应该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
        }
     }
  ...
}
于 2019-03-26T07:33:29.433 回答