时间戳

首页 > 解决方案 > Datatable vuetify 选择多行（Shift+单击）

vue.js - Datatable vuetify 选择多行（Shift+单击）

问题描述

我正在使用来自 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 文档示例

标签： vue.jsdatatablevuejs2vuetify.js

解决方案

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

我的解决方案依赖于使用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

推荐阅读