Vuetify DataTables 无法更新取消选择操作的数组怎么办？

Vuetify DataTables：解决取消选择操作不更新数组的问题

问题

在 Modernize vuetify VueJs Admin 模板中使用 Selectable dataTable 时，遇到了一个问题。在选中一行时，它会将项目添加到数组中。但是，在取消选择时，它不会删除或更新数组。

原因分析

问题出在取消选择操作中未更新 selected 数组。

解决方法

为了解决这个问题，需要在 v-data-table 中添加 update 事件监听器，并在取消选择时更新 selected。

<v-data-table ... :headers="headers"
        :items="BasicServices" v-model="selected" :search="search" show-select 
        class="border rounded-md"
        @update:current-items="currentItems = $event">
</v-data-table>

实现步骤

1. 将 selected 初始化为一个空数组。
2. 在 update:current-items 事件监听器中，将 selected 更新为新选择项目列表。

代码示例

const selected = ref([]); // 数组初始化为 []
const headers : any = ref([
    { title: 'Name', align: 'start', key: 'name' },
    { title: 'Cost', align: 'start', key: 'cost' },
    { title: 'Hours', align: 'start', key: 'hours' },
])

const filtrable = ref('')
function filterOnlyCapsText(value: { toString: () => string; } | null, query: string | null, item: any) {
    return value != null &&
        query != null &&
        typeof value === 'string' &&
        value.toString().toLocaleUpperCase().indexOf(query) !== -1
}

...

<v-data-table ... :headers="headers"
        :items="BasicServices" v-model="selected" :search="search" show-select 
        class="border rounded-md"
        @update:current-items="currentItems = $event">
</v-data-table>

常见问题解答

1. 为什么需要更新 selected 数组？

当取消选择一行时，如果不更新数组，它将仍然包含已取消选择项。

2. 如何在 TypeScript 中实现此解决方案？

const selected: Ref<string[]> = ref([]);

@Watch('currentItems')
private onCurrentItemsChange(value: string[]) {
  this.selected = value;
}

3. 我仍然遇到同样的问题，该怎么办？

确保在 Vue 实例中正确初始化 selected。还请检查 console 中是否有任何错误。

4. 这种解决方案适用于其他 Vue 组件吗？

这种解决方案特定于 Vuetify 的 v-data-table 组件。对于其他组件，可能需要采用不同的方法。

5. 有没有其他方法来解决此问题？

另一种方法是使用 @row-select 和 @row-unselect 事件监听器来手动更新数组。