+-
Vuejs Vuetify 数据表问题?

我在使用Vuetify的数据表,有标题和项目槽。现在我有一个方法设置,它应该是用来切换复选框的。toggleAll 而且似乎是部分工作,行被选中,但复选框没有被选中。现在 v-checkbox 拥有 input-value 处理模型的道具,但是当我设置了一个 v-modelvalue 道具,这时复选框就不会被选中了。

这里是一个部分工作的 代码和盒子. 你会看到,现在我只能选择一个复选框,其他的都没有被选中。

这是我的代码:-

顺便说一下,我使用的是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构建系统。