时间戳

首页 > 解决方案 > 对 v-data-table 进行排序检查复选框

vue.js - 对 v-data-table 进行排序检查复选框

问题描述

有谁能够确定为什么排序此表会自动选中某些框？当它们的值不在“已检查”数组中时，如何检查这些框？

<div id="app">
    <v-app id="inspire">
        <div>
            <v-data-table
                show-select
                :headers="headers"
                :items="desserts"
                class="elevation-1"
            >
                <template v-slot:items="props">
                    <td><v-checkbox v-model="checked" :value="props.item.name" /></td></td>
                    <td>{{ props.item.name }}</td>
                    <td class="text-xs-right">{{ props.item.calories }}</td>
                </template>
            </v-data-table>
        </div>
    </v-app>
</div>

代码笔： https ://codepen.io/EoghanCurtin/pen/ExPYqpY

标签： vue.jsvuetify.js

解决方案

更新

如果您希望您的复选框在排序时跟随其相应的项目 - 那么您将不得不像这样更改它们的定义

<v-checkbox 
  :value="checked.includes(props.item.name)" 
  @change="toggleCheckbox(props.item.name)" 
/>

然后使用以下函数来切换开/关状态

    toggleCheckbox(item)
    {
      const idx = this.checked.indexOf(item);
      if(idx === -1) this.checked.push(item);
      else this.checked.splice(idx,1);
    }

当数据表对其项目进行排序时 - 它不会对您的复选框进行排序。因此，您的复选框的值正在动态更改（因为item.name排序后对应的值不同）。

如果每行不需要超过 1 个复选框 - 最好利用对数据表的内置检查支持

推荐阅读