Vuejs Vuetify数据表问题

Question

我使用的是带有标题和项目槽的Vuetify Data表。现在我有了一个方法设置，它应该切换复选框toggleAll，并且它似乎部分起作用，因为行被选中，但复选框没有被选中。现在v-checkbox有一个input-value道具来处理模型，但当我设置v-model和value道具时，复选框将不会被选中。

这是一个部分工作的代码沙盒。你会看到，现在我只能选择一个复选框，而其他复选框都不会被选中。

这是我的代码：-

顺便说一句，我在Vuetify 1.5 上

这是我的Table.vue文件：-

<template>
<v-data-table
v-model="selected"
:headers="getTableHeaders"
:items="getDesserts"
item-key="name"
class="elevation-1">
<template v-slot:headers="props">
<tr>
<th class="checkbox">
<v-checkbox
hide-details
primary
:input-value="props.all"
:indeterminate="props.indeterminate"
@click.stop="toggleAll"
/>
</th>
<th
v-for="(header,i) in props.headers"
:key="`${i}`"
class="font-weight-bold"
>
{{ header.text }}
</th>
</tr>
</template>
<template v-slot:items="props">
<tr :active="props.selected" @click="props.selected = !props.selected">
<td>
<v-checkbox
v-model="selectRow"
:value="props.item.value"
:input-value="props.selected"
primary
hide-details
></v-checkbox>
</td>
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
</tr>
</template>
</v-data-table>
</template>
<script>
import {  mapGetters } from 'vuex';
export default {
data() {
return {
selected: []
}
},
computed: {
...mapGetters({
getTableHeaders: 'getTableHeaders',
getDesserts: 'getDesserts',
getSelectedRow: 'getSelectedRow'
}),
selectRow:{
get() {
return this.getSelectedRow;
},
set(val) {
this.$store.commit('setSelectedRow', val)
}
}
},
methods: {
toggleAll () {
if (this.selected.length) this.selected = []
else this.selected = this.desserts.slice()
},
}
}
</script>

这是我的Vuex商店：-

state: {
selectedRow: [],
headers: [
{ text: 'Dessert (100g serving)',align: 'left',value: 'name'},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
value: 'yogurt'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
value: 'sandwich'
},
]
},
getters: {
getSelectedRow: state => state.selectedRow,
getTableHeaders: state => state.headers,
getDesserts: state => state.desserts
},
mutations: {
setSelectedRow(state, payload) {
state.selectedRow = payload;
}
},

现在toggleAll似乎正在设置选定的，但由于某些原因没有得到检查。任何帮助都将不胜感激。非常感谢。

Answer 1

这似乎对我有用。标题复选框html代码。

<v-simple-checkbox
:value="selected.length == records.length"
:indeterminate="selected.length>0 && selected.length<records.length"
:ripple="false"
@click="toggleSelectAll"
></v-simple-checkbox>

切换全部功能。

toggleSelectAll() {
if (this.selected.length < this.records.length)
this.selected = this.records;
else this.selected = [];
}

Answer 2

首先，您的表模板可以简单得多。Vuetify实际上会为您生成正确的头，而无需为其指定模板。您的JavaScript也可以简单得多：

<template>
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
item-key="name"
select-all
>
<template #items="props">
<tr :active="props.selected" @click="props.selected = !props.selected">
<td>
<v-checkbox
:input-value="props.selected"
primary
hide-details
></v-checkbox>
</td>
<td>{{ props.item.name }}</td>
<td class="text-xs-center">
{{ props.item.calories }}
</td>
<td class="text-xs-center">
{{ props.item.fat }}
</td>
</tr>
</template>
</v-data-table>
</template>
<script>
export default {
name: 'MyVuexDataTable',
computed: {
...mapState(['desserts', 'headers']),
selected: {
get () {
return this.$store.state.selected
},
set (selected) {
this.$store.dispatch('setSelected', selected)
},
},
},
}
</script>

您也不必编写自己的函数来进行切换。Vuetify会帮你处理的。至于存储，除了在更改对象和数组时需要小心之外，您所拥有的基本上都很好。Vue的反应性系统不会对属性的变化做出反应，因此最好使用内置的Vue.set()功能。

const SET_SELECTED = 'SET_SELECTED' // mutation type
const store = new Vuex.Store({
state: {
selected: [],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
],
headers: [
{ text: 'Dessert (100g serving)', align: 'left',value: 'name'},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
],
},
actions: {
setSelected ({ commit }, selected) {
commit(SET_SELECTED, selected)
}
},
mutations: {
[SET_SELECTED] (state, selected) {
Vue.set(state, 'selected', [...selected])
}
},
})

这是一个代码笔，有一个完整的工作示例。它与您在项目中使用的略有不同，因为它都在浏览器中运行，并且没有webpack构建系统。