提示信息

n-data-table , 选行时自动选中单选按钮

清楚 已关注

在 Vuetify 的 v-data-table 中,如果您想在选中行时自动选中单选按钮,可以使用 item 插槽以及 selected 属性。以下是一个例子:

  1. <template>
  2. <v-data-table
  3. :headers="headers"
  4. :items="desserts"
  5. item-key="name"
  6. show-select
  7. class="elevation-1"
  8. >
  9. <template v-slot:item="{ item, isSelected, select }">
  10. <tr @click="select(!isSelected)">
  11. <td>
  12. <v-radio :input-value="isSelected"></v-radio>
  13. </td>
  14. <td>{{ item.name }}</td>
  15. <td>{{ item.calories }}</td>
  16. <!-- Add more columns as needed -->
  17. </tr>
  18. </template>
  19. </v-data-table>
  20. </template>
  21. <script>
  22. export default {
  23. data: () => ({
  24. headers: [
  25. { text: "Dessert (100g serving)", value: "name" },
  26. { text: "Calories", value: "calories" }
  27. // Add more headers as needed
  28. ],
  29. desserts: [
  30. { name: "Frozen Yogurt", calories: 159 },
  31. { name: "Ice cream sandwich", calories: 237 }
  32. // Add more items as needed
  33. ]
  34. })
  35. };
  36. </script>

这个例子中的代码用于创建一个带有单选按钮的数据表格。当用户点击一行时,对应的单选按钮会被自动选中或取消选中。

注意:确保您的 v-data-table 组件版本支持这个功能,不同版本的实现可能会有所不同。

    遇到难题? "AI大模型GPT4.0、GPT" 是你的私人解答专家! 点击按钮去提问......
清楚 关注 已关注

最近一次登录:2023-12-27 17:28:32   

暂时还没有签名,请关注我或评论我的文章
×
免费图表工具,画流程图、架构图