Vuetify数据表：如何通过v-if基于item属性控制item插槽显示？

这确实是个容易踩的小坑——插槽的作用域变量item只有在插槽内容的内部才能被访问到，直接在<template v-slot:item>标签上使用v-if的话，因为这个标签属于父组件作用域，自然拿不到插槽传递的item变量。

这里有两种简单且实用的解决方法，完全适配你的需求：

方法一：将判断逻辑移到插槽内部 #

把v-if放到插槽内容里的元素上，这样就能正常访问item变量了。如果需要在非加载状态下保留原行的默认渲染逻辑，可以加个v-else来处理：

<template v-slot:item="{ item }">
  <!-- 加载状态时显示进度圈，占满整行 -->
  <v-progress-circular 
    v-if="item.loading" 
    indeterminate 
    color="primary"
    class="mx-auto"
  ></v-progress-circular>
  
  <!-- 非加载状态时渲染默认行内容 -->
  <template v-else>
    <td v-for="(header, index) in headers" :key="index">
      {{ item[header.value] }}
    </td>
  </template>
</template>

这种方式的好处是逻辑清晰，不管行是否加载，插槽都会被激活，但内容会根据item.loading的状态动态切换，完美实现“仅加载时替换渲染逻辑”的需求。

方法二：针对特定列使用item.<column>插槽（如果需求是替换单列） #

如果你其实只需要替换某一列的内容，而不是整行，可以针对具体列使用列级插槽，这样判断逻辑同样可以正常工作：

<template v-slot:item.yourColumn="{ item }">
  <v-progress-circular 
    v-if="item.loading" 
    indeterminate 
    color="primary"
    small
  ></v-progress-circular>
  <span v-else>{{ item.yourColumn }}</span>
</template>

这种方式更轻量化，适合只需要修改单列的场景。

为什么原写法不行？ #

再补充下原理：v-slot定义的作用域变量（比如这里的item）是专门传递给插槽内部内容的，而声明插槽的<template>标签本身属于父组件的作用域，所以它的指令（比如v-if）无法访问到插槽作用域里的变量，这就是你遇到item未定义的原因。

内容的提问来源于stack exchange，提问作者jaudo