如何在Vuetify数据表格中实现动态项插槽，将布尔值转为图标？

问题根源 #

你之前的错误在于两点：

• 用计算属性生成的"item.wo"是字符串，直接做三元判断时，非空字符串会被Vue判定为true，所以所有单元格都显示真状态图标
• Vuetify的item插槽命名不需要提前拼接完整的item.xxx字符串，直接动态拼接字段名即可

修正后的代码实现 #

子组件模板修改

直接遍历父组件传递的booleans数组，动态生成插槽名，并通过对象属性访问语法获取布尔值：

<template v-for="bool in booleans" :key="bool.name" v-slot:[`item.${bool.name}`]="{ item }">
  <v-icon class="mr-3">
    {{ item[bool.name] ? bool.iconTrue : bool.iconFalse }}
  </v-icon>
</template>

移除冗余代码

原来的boolNames计算属性可以直接删除，不需要再生成"item.wo"这类字符串，插槽名通过模板字符串[item.${bool.name}]动态生成即可。

完整子组件示例（简化版） #

<template>
  <v-data-table
    :headers="headers"
    :items="items"
  >
    <!-- 处理布尔值列的自定义插槽 -->
    <template v-for="bool in booleans" :key="bool.name" v-slot:[`item.${bool.name}`]="{ item }">
      <v-icon class="mr-3">
        {{ item[bool.name] ? bool.iconTrue : bool.iconFalse }}
      </v-icon>
    </template>
  </v-data-table>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义接收的props
defineProps({
  headers: {
    type: Array,
    required: true
  },
  items: {
    type: Array,
    required: true
  },
  booleans: {
    type: Array,
    default: () => []
  }
});
</script>

关键说明 #

• 动态插槽名使用Vue的模板字符串语法，直接拼接出item.wo、item.ep这类符合Vuetify要求的插槽名称
• 通过item[bool.name]访问对象的动态属性，这是处理不确定属性名时的标准写法，能正确获取到对应布尔值进行判断
• 用bool.name作为循环的key，比数组索引更稳定，避免数组元素顺序变化引发的组件渲染问题

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