使用 Switch 或 Checkbox 验证 Table

Question

我想使用 v-data-table 为最终用户打开和关闭权限以接收通知。

我有两个不同的问题，第二个是在我的 codepen 中试图重现这个问题，这可能会突出我对这个问题的误解。我在下面列出了两个。包含 Codepen 以复制我的 UAT 代码。

我的项目最初是在 2019 年初部署的，目前正在使用 "vuetify": "^1.5.18" 这可以解释为什么我无法获取它使用“vuetify”工作：“^2.2.11”。

我有一个部署到 dev/production 环境的版本。我接下来要解决的问题是，为什么我的 Switch 在数据 table 中单击开关的圆圈部分时没有改变，它的任一侧都可以正常更新。在数据 table 之外，Switch 按预期工作。这不是最大的问题，但不喜欢它作为用户体验，因为您希望只需单击开关即可更新。

我试图重新创建问题以使用 codepen 进行演示，但遇到了第二个问题，即此处的开关不会显示在数据中 table。这让我感到不舒服table，因为我不明白最终的行为。 Codepen

  <v-data-table
      :headers="headers"
      :items="listItems"
      class="elevation-2"
    >
    <template slot="items" slot-scope="props">
      <tr>
        <td>{{props.item.label}}</td>
        <td>
          <v-switch
            v-model="props.item.switch"
            @click="details(props.item.label, !props.item.switch)"
          ></v-switch>
        </td>
        <td>
          <v-checkbox
              v-model="props.item.switch"
              label="Test"
              @click="details(props.item.label, !props.item.switch)"
          >
          </v-checkbox>
        </td>

      </tr>
    </template>
  </v-data-table>

</v-container>

Answer 1

问题出在您的模板标签语法上。

这就是你在 v-data-table

中编写插槽模板的方式

<template slot="item.switch" slot-scope="{ item }">
    <v-switch v-model="item.switch"></v-switch>
</template>

修复此问题后，您既不需要开关或复选框上的点击事件，也不需要方法“详细信息”。使用 v-model 就够了。

这里是组件的完整代码，供大家参考

<template>
    <v-container class="px-0" fluid>
        <v-data-table :headers="headers" :items="listItems" class="elevation-2">
            <template slot="item.switch" slot-scope="{ item }">
                <v-switch v-model="item.switch"></v-switch>
            </template>
            <template slot="item.checkbox" slot-scope="{ item }">
                <v-checkbox v-model="item.switch" :label="item.switch"></v-checkbox>
            </template>
        </v-data-table>
    </v-container>
</template>

<script>
    export default {
        props: ["car"],
        data() {
            return {
                switch1: true,
                listItems: [
                    { label: 0, switch: false },
                    { label: 1, switch: true },
                    { label: 2, switch: true }
                ],
                headers: [
                    { text: 'Label', sortable: false, value: 'label' },
                    { text: 'Switch', sortable: false, value: 'switch' },
                    { text: 'Checkbox', sortable: false, value: 'checkbox' },
                ]
            }
        },

        methods: {
        },
    };
</script>

祝你好运。

使用 Switch 或 Checkbox 验证 Table

Vuetify Table with Switch or Checkbox

vue.js

vue-component

vuejs2

vuetify.js

v-data-table