javascript - Bootstrap Vue更改b表中每个单元格的背景

Question

我正在使用 bootstrap vue b-table 来显示我的项目：

<b-table striped bordered :tbody-tr-class="row_class" :fields="fields" :items="items" head-variant="light" class="o-list"
    thead-class="o-gradient-header"
    @row-selected="onRowSelected" selectable
    no-local-sorting @sort-changed="change_sort" :sort-by="list_options.sort"
    :sort-desc="list_options.order==='desc'">

...

</b-table>

我想根据函数调用更改每个单元格的背景颜色：

row_class(item) {
    // Insert conditionals
    // return CSS class string 
}

但这正在改变整个行的样式。我不想要那个。我只想更改单元格的样式？有没有办法改变每个单元格的背景颜色？

标签： javascriptcssvue.jsbootstrap-vue

Answer 1

tbody-tr-class您可以使用道具设置每一行的样式

<b-table striped hover caption-top
          :items="items"
          :fields="fields"
          :tbody-tr-class="rowClass"
    >
    </b-table>

脚本

new Vue({
    el: "#app",
    data() {
      return {
        fields: [
          {
            key: "name",
            label: "Name",
            sortable: true
          },
          {
            key: "email",
            label: "Email",
            sortable: true
          },
          {
            key: "age",
            label: "Old",
            sortable: true
          }
        ],
        items: [
          { age: 40, name: "admin1", email: "[e-mail]" },
          { age: 21, name: "admin2", email: "[e-mail]" },
          { age: 89, name: "admin3", email: "[e-mail]" },
          { age: 38, name: "admin4", email: "[e-mail]" }
        ]
      };
    },
    methods: {
      rowClass(item, type) {
        if (!item || type !== 'row') return
        if (item.age > 30) return 'table-success'
      }
    }
  });