[Vuejs]-Bootstrap Vue change background for each cell in b-table

3👍

You can style every row using the tbody-tr-class prop

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

script

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: "hoge@for.jp" },
          { age: 21, name: "admin2", email: "huga@for.jp" },
          { age: 89, name: "admin3", email: "piyo@for.jp" },
          { age: 38, name: "admin4", email: "aaaaa@for.jp" }
        ]
      };
    },
    methods: {
      rowClass(item, type) {
        if (!item || type !== 'row') return
        if (item.age > 30) return 'table-success'
      }
    }
  });

Leave a comment