vuetify：如何在更新项目值时使 v-data-table 行闪烁

Answer 1

我创建了一个标志并添加了新的 css 类。它可以工作，但代码很差。如果我找到了更好更干净的解决方案，我将其发布在这里

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      controlAnimation: false,
      items: [{
          id: 1,
          name: 'Frozen Yogurt',
          calories: 159,
        },
        {
          id: 2,
          name: 'Ice cream sandwich',
          calories: 237,
        },
        {
          id: 3,
          name: 'Eclair',
          calories: 262,
        },
        {
          id: 4,
          name: 'Cupcake',
          calories: 305,
        },
      ],
      headers: [{
          text: 'Dessert',
          value: 'name',
        },
        {
          text: 'Calories',
          value: 'calories'
        },
      ],
    };
  },
  
  methods: {
    blink(item) {
      if (this.controlAnimation) {
        let itemClassTrue = 'blink-even-true'
        /* check item.value, based on condition...
        itemClassTrue = 'blink-less-true'
        itemClassTrue = 'blink-even-true'
        itemClassTrue = 'blink-great-true'
        */
        return itemClassTrue;
      } else {
        let itemClassFalse = 'blink-great-false'
        /* check  item.value, based on condition...
        itemClassTrue = 'blink-less-false'
        itemClassTrue = 'blink-even-false'
        itemClassTrue = 'blink-great-false'
        */
        return itemClassFalse;
      }
    },
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min;
    },
    updateValues() {
      const newValues = this.items.map((el) => { 
        return {...el, calories: this.getRandomInt(100,500)}; 
      })
      this.items = newValues
    } 
  },
  computed: {
    displayItems() {
      this.controlAnimation = !this.controlAnimation
      var newItems = this.items.map((el) => { 
        return {...el, calories: el.calories * 1}; 
      })
      return newItems
    }
  },
});

.blink-less-true {
  animation: blinking-less-true 1s 2 !important;
  --background-color: rgb(196, 76, 76) !important;
}

.blink-even-true {
  animation: blinking-even-true 1s 2 !important;
  --background-color: #fa0 !important;
}

.blink-great-true {
  animation: blinking-great-true 1s 2 !important;
  --background-color: rgb(3, 163, 70) !important;
}

.blink-less-false {
  animation: blinking-less-false 1s 2 !important;
  --background-color: rgb(196, 76, 76) !important;
}

.blink-even-false {
  animation: blinking-even-false 1s 2 !important;
  --background-color: #fa0 !important;
}

.blink-great-false {
  animation: blinking-great-false 1s 2 !important;
  --background-color: rgb(3, 163, 70) !important;
}

@keyframes blinking-less-false {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-even-false {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-great-false {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-less-true {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-even-true {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}
@keyframes blinking-less-true {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row class="pa-5">
        <v-btn 
          @click="updateValues()"
        > Update value </v-btn>
      </v-row>
      <v-row class="px-5">
        <v-data-table 
         hide-default-footer 
         :headers="headers" 
         :items="displayItems" 
         :item-class="blink"
       />
      </v-row>
    </v-container>
  </v-app>
</div>

Answer 2

item-class 离你不远了。它可以接受一个字符串，告诉它在项目的对象上寻找一个道具。有了这个，当您更新数据时，您可以将眨眼类添加/删除到您动态创建的道具中。

在这种情况下，我只是将道具命名为dynamicClass

像这样的东西： 模板：

   <v-data-table 
     hide-default-footer 
     :headers="headers" 
     :items="displayItems" 
     :item-class="dynamicClass"
   />

脚本：

  methods: {
    updateRandom() {
     const randomIdx = this.generateRandomNumber(0, this.items.length - 1);
     const randomNumber = this.generateRandomNumber(1, 1200);

     let item = { ...this.items[randomIdx] };
     item.calories = randomNumber;
     item.dynamicClass = "blink-less";

     this.$set(this.items, randomIdx, item);

     setTimeout(() => {
       delete item.dynamicClass;
       this.$set(this.items, randomIdx, item);
     }, 2000);
   },
   generateRandomNumber(min, max) {
     return Math.floor(Math.random() * (max - min + 1) + min);
   },
 },

这里的想法是我们正在从数组中的项目/对象中添加和删除类。使用this.$set() 保证反应性。但是您也可以使用Array.splice()，但无论哪种方式，您都希望替换该索引处的数据对象以保持反应性。

这是codesandbox 中的一个工作示例