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

Posted 2023-02-16

【中文标题】Bootstrap-vue b-table：如何为非活动行设置 css-Class？

【英文标题】：Bootstrap-vue b-table: How to set an css-Class for inactive rows?

【发布时间】：2018-12-09 21:32:22

【问题描述】：

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

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

示例（只有 item 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,
            ,

        ],

    ,
  
  ...

【参考方案1】：

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

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

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

函数传递两个参数：item（行项数据对象，如果是数据行）, andtype(which is a string specifying the type of row being rendered:rowfor 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 text color utility classes，但您可以改用表格变体实用程序类，例如 table-success 和 table-light 来更改行的背景颜色。

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

【讨论】：

当我们在每个

元素中都有变体时如何使它工作？

如何覆盖这些实用程序类？例如，我试过 <style> .table-success background: var(custom-grey) </style> 无济于事。

【参考方案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
        
     
  ...

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习