Datatable vuetify 选择多行（Shift+单击）

Posted 2023-02-22

【中文标题】Datatable vuetify 选择多行（Shift+单击）

【英文标题】：Datatable vuetify select multiple rows (Shift+Click)

【发布时间】：2020-01-21 17:40:14

【问题描述】：

我正在使用来自 Vuetify 1.5.x 的数据表

已启用复选框以便可以选择多行，我希望能够使用 Shift + Click 进行选择，这样我就不必单击每个复选框，这与 Gmail 的工作方式完全相同。

如果我有一个按排序更改的行 ID，或者在对数据表进行排序时对行数组进行了重新排序，这并不难。但这些似乎都不起作用。

有没有人用 vuetify 数据表做到这一点？

    <template v-slot:items="props">
        <tr :active="props.selected" @click="selectRow(props);">
            <td>
                <v-layout>
                    <v-flex>
                        <v-checkbox
                            :input-value="props.selected"
                            primary
                            hide-details
                            :class=" 'red--text': props.item.was_modified_recently == 1 "
                        ></v-checkbox>
                    </v-flex>
               </td>
          </tr>
     </template>

Vuetify documentation example

【问题讨论】：

我有完全相同的要求，但使用 vuetify 2.x

由于它是一个组件并且组件代码需要调整，您可以尝试 Vuetify discord 以获得支持discordapp.com/channels/340160225338195969/389885858729164801。对于 id，您可以使用“item-key”字段，但就像您说的那样，如果您使用可排序表，它不会重新排列。

总有一个选项可以分叉和更改该组件:)

【参考方案1】：

实际上我今天必须解决这个问题。

我的解决方案依赖于使用 item-selected 钩子和执行批量选择的方法。

methods: 
  bulkSelect( item: b, value ) 
      const  selectedRows, current, shiftKeyOn  = this;

      if (selectedRows.length == 1 && value == true && shiftKeyOn) 
        const [a] = selectedRows;
        let start = current.findIndex((item) => item == a);
        let end = current.findIndex((item) => item == b);
        if (start - end > 0) 
          let temp = start;
          start = end;
          end = temp;
        
        for (let i = start; i <= end; i++) 
          selectedRows.push(current[i]);
        
      
    ,

这就是它的精髓。还有其他管理细节，例如跟踪何时按住 shift，并防止浏览器在按住 shift 并单击第二行时突出显示表格的文本。

我做了一个代码笔来展示这个功能。

https://codepen.io/ryancwynar/pen/jOWoXZw

【参考方案2】：

在 vuetify 的新版本中，即 2.0 您的问题可以通过以下方式轻松解决

我已经把答案放在下面Stack Overflow question link

【参考方案3】：

Vuetify 添加了prepend-item 插槽，可让您在列出我们可以添加“全选”的项目之前添加自定义项目

请查看codepen on pretend-item for select all checkboxes中的示例

【参考方案4】：

我遇到了和你一样的案子。

首先，您必须在 <tr> 上添加另一个事件（键盘事件） 标记并将 props 作为参数传递。 然后使用 slice 到 items 数组以确定您想要的选定项目的范围。

就我而言，我已将选定的数组存储在 vuex 存储 中。 希望我能帮上忙；）

<template v-slot:items="props">
            <tr :active="props.selected" @click.shift="useShift(props)" @click="selectRow(props)">
                <td>
                    <v-layout>
                        <v-flex>
                            <v-checkbox
                                :input-value="props.selected"
                                primary
                                hide-details
                                :class=" 'red--text': props.item.was_modified_recently == 1 "
                            ></v-checkbox>
                        </v-flex>
                   </td>
              </tr>
         </template>


    export default 
       methods:
          ...mapMutations(["setSelected"]),
          useShift( index ) 
           this.setSelected(
            this.items.slice(
              this.items.findIndex(el => 
                return this.selected.find(v => v.track.id == el.track.id);
              ),
              index
            )
          );
        ,