带有开关或复选框的 Vuetify 表

Posted 2023-02-23

【中文标题】带有开关或复选框的 Vuetify 表

【英文标题】：Vuetify Table with Switch or Checkbox

【发布时间】：2021-04-04 13:55:37

【问题描述】：

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

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

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

我有一个部署到开发/生产环境的版本。我要解决的问题是为什么我在数据表中的开关在单击开关的圆圈部分时没有改变，两边都更新得很好。在数据表之外，Switch 按预期工作。这不是最大的问题，但不喜欢它作为用户体验，因为您期望只需单击开关即可更新。

我尝试重新创建问题以演示如何使用 codepen，但遇到了第二个问题，即此处的开关不会显示在数据表中。这让我感到不舒服，因为我不了解最终的行为。 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>

【参考方案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>

祝你好运。

【讨论】：

谢谢！！我已经更新了 codepen，以防将来有人想引用它。