Quasar Vue3中子组件Props为空致表格内容不渲染的问题

核心问题梳理 #

你的代码存在几个关键问题导致表格内容无法渲染：

1. 子组件缺少columns配置 #

Quasar的q-table必须明确配置columns属性，定义表格要显示的列信息，否则表格无法识别要渲染的内容。

2. 响应性丢失 #

子组件中rows = [props.airCraft]的写法会丢失响应性，直接赋值不会追踪props.airCraft的变化，应该使用计算属性或者直接在模板中使用[airCraft]。

3. 模板标签未正确闭合 #

子组件的模板里多个标签（如<template v-slot:body>、<q-table>、<q-card-section>等）都没有正确闭合，这会导致DOM解析异常，进而影响渲染。

4. 父组件代码语法错误 #

父组件存在<script>标签嵌套、<template>未闭合的问题，会导致组件无法正常编译。

修正后的代码示例 #

子组件（ModalAircraft.vue） #

<script setup>
import { computed } from 'vue'

const props = defineProps({
  airCraft: {
    required: true,
    type: Object
  },
  modelValue: {
    required: true,
    type: Boolean
  }
})

// 用计算属性保持响应性
const rows = computed(() => [props.airCraft])

// 定义表格列配置
const columns = [
  { name: 'id', label: 'ID', field: 'id' },
  { name: 'name', label: '名称', field: 'name' }
]
</script>

<template>
  <q-dialog v-model="modelValue">
    <q-card>
      <q-card-section>
        <q-table
          title="飞机信息"
          :rows="rows"
          :columns="columns"
          row-key="name"
          :hide-bottom="rows.length > 0"
          flat
          bordered
        >
          <template v-slot:body="tableProps">
            <q-tr :props="tableProps">
              <q-td key="id" :props="tableProps">
                {{ tableProps.row.id }}
              </q-td>
              <q-td key="name" :props="tableProps">
                {{ tableProps.row.name }}
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

父组件 #

<script setup>
import { ref } from 'vue'
import ModalAircraft from './ModalAircraft.vue'

// 用ref包裹对象，保持响应性（后续修改属性时子组件能感知）
const airCraft = ref({
  id: '1',
  name: '测试飞机'
})
const fixed = ref(true)
</script>

<template>
  <button @click="fixed = true">打开模态框</button>
  <ModalAircraft v-model="fixed" :airCraft="airCraft" />
</template>

关键说明 #

• columns配置：必须为每一列定义name、label、field等属性，field对应数据对象中的键名，表格才能正确映射数据。
• 响应性处理：使用computed包裹rows，确保当props.airCraft变化时，表格数据能自动更新。
• 标签闭合：所有Vue/Quasar组件标签必须正确闭合，否则会导致渲染异常。
• 父组件响应性：用ref或reactive包裹airCraft，后续修改对象属性时，子组件能同步感知到变化。

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