带有group by和v-slot自定义行的Vuetify v-data-table导致意外性能

mm9b1k5b  于 2023-03-03  发布在  Vue.js
关注(0)|答案(1)|浏览(177)

验证版本:2.6.3 Vue版本:2.6.14
我有一些关于使用vuetify v-data-table和它的v槽定制行的问题。我已经附上了代码吹,当点击分页顶部分组标题(w1,w2,w3)将总是检查意外(有时沿着禁用颜色)和以前选择的组都消失了。任何人都可以为我提供一些解决这个问题的方法

<div id="app">
  <v-app id="inspire">
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      item-key="name"
      @click:row="handleClick"
      class="elevation-1"
      group-by='class'
      :items-per-page="4"
    >
     <template v-slot:group.header="{items}">
       <th colspan="6">
         <v-checkbox :value=items[0].class>
           <template v-slot:label>
             {{ items[0].class }}
         </template>
         </v-checkbox>
         
       </th>
      </template>
    </v-data-table>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods:{
    handleClick(value)
    {
      console.log(value)
    }
  },
  data () {
    return {
      singleSelect: false,
      selected: [],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
          class: 'w1'
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
          class: 'w2'
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
          class: 'w2'
        },
        {
          name: 'Eclair2',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
          class: 'w2'
        },
        {
          name: 'Eclair3',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
          class: 'w3'
        },{
          name: 'Eclair4',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
          class: 'w3'
        },
      ],
    }
  },
})

https://codepen.io/tymiao1220/pen/YzOWOqz

3pvhb19x

3pvhb19x1#

不知道为什么会发生这种情况,我猜是Vue在绘制下一页时试图重用现有的复选框,内部状态变得混乱。
但是,一旦您实际绑定到一个状态,它就会消失,例如,使用以下数据

data () {
    return {
      selectedGroups: {w1: null, w2: null, w3: null},

你能做的

<v-checkbox :value="items[0].class" v-model=selectedGroups[items[0].class]>

不得不说,v-checkbox的 prop 是混乱的,在:value:true-value/:false-value:input-value:model-value之间。
在文档中,它说v-model绑定到:model-value,但这似乎是错误的,至少在您正在使用的版本中,它绑定到:input-value(并且它监听的事件是@change,而不是通常的@input)。
:value prop只是设置底层input元素的value属性,除非您使用常规表单提交,否则使用它可能没有意义。如果您使用异步表单数据提交,则首选:true-value:false-value
不管怎样,长话短说,最好使用v-bind,然后怪异的行为就会停止。

相关问题