+-
我在使用Vuetify的数据表,有标题和项目槽。现在我有一个方法设置,它应该是用来切换复选框的。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
似乎是设置选定的,但由于某些原因没有得到检查。任何帮助将被感激。谢谢您的帮助。
0
投票
投票
首先,你的表格模板可以更简单。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构建系统。