如何通过布尔值控制bootstrapvue b-table trClass

Question

我正在使用来自 BootstrapVue 的 b-table。但是每一行都有一个按钮和当我单击按钮时，我想将行背景更改为另一种颜色，我发现 tbody-tr-class 可以控制但是不能让按钮控制

The Changes and noChange is scss name

<b-table :sticky-header="true"
             responsive
             :fields="fields" :items="items" :no-border-collapse="true"
    :tbody-tr-class = "this.changeColor!=false ? 'Changes' : 'noChange'"
    >
      <!--      ref="selectable"-->
      <!--      select-mode="single"-->
      <!--      selectable-->
      <template v-slot:cell(\r)="row">
        <b-dropdown toggle-class="dropdown" size="lg" variant="link" text="..." no-caret>
          <b-dropdown-item @click="onClickButton1(row.item)">buttonName</b-dropdown-item>
        </b-dropdown>
      </template>
    </b-table>

方法

data(){
    return{
       changeColor:false;
    }
}
methods:{
    onClickButton1(item){
        this.changeColor = true;
        console.log(item)
    }
}

Answer 1

您需要指定要在单元格槽中更改的列。以下代码更改所有行的背景。此外，我创建了另一种方法来在单击该行时更改该行的背景。

new Vue({
  el: '#app',
  data() {
    return {
      changeColor: false,
      fields: ['first_name', 'last_name', 'age', 'button'],
      items: [{
          isActive: true,
          age: 40,
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          isActive: false,
          age: 21,
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          isActive: false,
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson'
        },
        {
          isActive: true,
          age: 38,
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  },
  methods: {
    onClickButton1(item) {
      this.changeColor = true
    },
    changeRowVariant(item) {
      item['_rowVariant'] = !item._rowVariant ? "danger" : ""
      this.$forceUpdate()
    }
  }


})

.Changes {
  background-color: white;
}

.noChange {
  background-color: red;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table :sticky-header="true" responsive :fields="fields" :items="items" :no-border-collapse="true" :tbody-tr-class="!changeColor ? 'Changes' : 'noChange'" @row-clicked="changeRowVariant">

    <template #cell(button)="row">
        <b-dropdown toggle-class="dropdown" size="lg" variant="link" text="..." no-caret>
          <b-dropdown-item @click="onClickButton1(row.item)">buttonName</b-dropdown-item>
        </b-dropdown>
      </template>
  </b-table>

</div>

Answer 2

因为您希望颜色逐行更改。您可以将方法传递给 tbody-tr-class 道具。此方法将按行进行评估，并且还会接收该行的项目作为参数。

这意味着您可以在您的项目上设置一个布尔标志（示例中的 hasChanged），这将控制该行是否应该具有不同的颜色。

您从函数中 return 得到的内容，将被添加到 class 行中。在示例中，我使用 class object syntax，但您也可以 return 包含 classes.

的字符串或数组

我正在使用 $set 将 hasChanged 属性添加到我们的项目中，以确保它是反应式的。 here.

描述了为什么需要这样做

new Vue({
  el: '#app',
  data() {
    return {
      fields: ['first_name', 'last_name', 'actions'],
      items: [{
          first_name: 'Dickerson',
          last_name: 'Macdonald'
        },
        {
          first_name: 'Larsen',
          last_name: 'Shaw'
        },
        {
          first_name: 'Geneva',
          last_name: 'Wilson'
        },
        {
          first_name: 'Jami',
          last_name: 'Carney'
        }
      ]
    }
  },
  methods: {
    toggleColor(item) {
      this.$set(item, 'hasChanged', !item['hasChanged'])
    },
    getTrClass(item) {
      return {
        changes: item['hasChanged']
      }
    }
  }
})

.changes {
  background-color: red;
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table :fields="fields" :items="items" :tbody-tr-class="getTrClass">
    <template #cell(actions)="{ item }">
      <b-btn @click="toggleColor(item)">Toggle Color</b-btn>
    </template>
  </b-table>
</div>

如何通过布尔值控制bootstrapvue b-table trClass

how to control bootstrapvue b-table trClass by boolean

vue.js

bootstrap-vue