NuxtUI Table：如何仅对ID为1的指定行使用插槽

要让NuxtUI的UTable只在ID为1的行中使用自定义插槽，你可以在插槽内部通过判断当前行的id值实现条件渲染，具体修改如下：

<script setup>
const columns = [{
  key: 'name',
  label: 'Name'
}, {
  key: 'title',
  label: 'Title'
}]

const people = [{
  id: 1,
  name: 'Team',
  title: 'Red Bull'
}, {
  id: 2,
  name: 'Country',
  title: 'Netherlands'
}]
</script>

<template>
  <UTable :rows="people" :columns="columns">
    <template #title-data="{ row }">
      <!-- 仅在id为1的行显示自定义链接，其他行展示原始内容 -->
      <template v-if="row.id === 1">
        <NuxtLink to="/redbull">RedBull Racing Team</NuxtLink>
      </template>
      <template v-else>
        {{ row.title }}
      </template>
    </template>
  </UTable>
</template>

核心逻辑说明 #

• 通过插槽提供的row参数获取当前行数据，用row.id === 1精准匹配目标行
• 目标行渲染自定义的NuxtLink组件，非目标行直接展示原始的row.title值，保留表格其他行的默认显示效果

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