Select Vuetify 数据的所有行 table 具有自定义 table 主体实现

Question

当我有插槽主体的自定义实现时，我不知道如何为我的 data-table using Vuetify v2 实现 select all 选项。

这是一个小例子：

<template>
  <v-card
    max-width="300"
    class="pa-6"
  >
    <v-data-table
      :items="tasks"
      :headers="headers"
      show-select
      dense
    >
      <template v-slot:body="{ items }">
        <tbody>
          <tr
            v-for="item in items"
            :key="item.id"
          >
            <td>
              <v-checkbox
                v-model="selectedTasks"
                :value="item.id"
                style="margin:0px;padding:0px"
                hide-details
              />
            </td>
            <td>{{ item.text }}</td>
            <td>
              <v-btn
                text
                icon
                x-small
              >
                <v-icon>pageview</v-icon>
              </v-btn>
            </td>
          </tr>
        </tbody>
      </template>
    </v-data-table>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'task', value: 'text' },
        { text: 'actions' }
      ],
      selectedTasks: []
    }
  },
  computed: {
    tasks() {
      return [
        { id: 1, text: 'Collect packets' },
        { id: 2, text: 'Buy bread' }
      ]
    }
  }
}
</script>

产生以下数据table：

现在我想实现当复选框 "all" 被 select 编辑时（如上图所示），它 select 我的 [=40= 的所有行].

文档说要为数据实现插槽 header.data-table-select to customise the select all button, and I could find the example below in the examples about slots-table。

<template v-slot:header.data-table-select="{ on , props }">
    <v-simple-checkbox
       color="purple"
       v-bind="props"
       v-on="on"
    />
</template>

但是，当我选中此框时，我无法select 所有行。我没有找到任何关于如何使用 "custom" table 主体实现 select 的示例。希望有人可以在这里帮助我。提前致谢

Answer 1

数据table v-model 需要设置为selectedItems 并且用于选择的复选框需要具有项目集合的值。

<!DOCTYPE html>
<html>

<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
<div id="app">
    <v-app>
        <v-content>
            <v-container>
                <h2>Data Table</h2>

                <v-data-table v-model="selectedTasks" :headers="headers" :items="tasks" item-key="id" show-select>

                    <template v-slot:body="{ items }">
                        <tbody>
                            <tr v-for="item in items" :key="item.id">
                                <td>
                                    <v-checkbox v-model="selectedTasks" :value="item" style="margin:0px;padding:0px"
                                        hide-details />
                                </td>
                                <td>{{ item.text }}</td>
                                <td>
                                    <v-btn text icon x-small>
                                        Edit
                                    </v-btn>
                                </td>
                            </tr>
                        </tbody>
                    </template>
                </v-data-table>
                <v-btn v-on:click="addTask()">Add Task</v-btn>
            </v-container>
        </v-content>
    </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
    new Vue({
        el: '#app',
        vuetify: new Vuetify(),

        data() {
            return {
                headers: [
                    {
                        text: 'Task',
                        value: 'text'
                    },
                    {
                        text: 'Actions'
                    }
                ],
                tasks: [
                    {
                        id: 1,
                        text: 'Collect packets'
                    },
                    {
                        id: 2,
                        text: 'Buy bread'
                    }
                ],
                selectedTasks: []
            }
        },
        methods: {
            addTask() {
                this.tasks = this.tasks.map(t => ({...t}))
                this.tasks.push({id: this.tasks.length + 1, text: 'New Task'});

                this.selectedTasks = this.selectedTasks.map(t => {
                    return this.tasks.find(e => e.id == t.id) || t;
                })
            }
        }
    })
</script>
</body>

</html>

Select Vuetify 数据的所有行 table 具有自定义 table 主体实现

Select all rows of a Vuetify data table with custom table body implementation

datatable

slots

slot

vue.js

vuetify.js