如何在Quasar Q-Table中显示嵌套对象的属性值

在基于Quasar的Electron应用开发中，使用TypeScript定义了以下接口：

interface CharterParty {
  startDate: Date;
  endDate: Date;
  cargoType: string;
}

interface PortOperations {
  expectedArrival: Date;
  actualArrival: Date;
  expectedDeparture: Date;
  actualDeparture: Date;
}

interface Ship {
  name: string;
  status: string;
  charterParty: CharterParty;
  loadPortOperations: PortOperations;
  dischargePortOperations: PortOperations;
}

通过ref定义船舶数据列表：

const ships = ref<Ship[]>([
])

为Q-Table定义列配置：

const columns = ref([
  {
    name: 'name',
    required: true,
    label: 'Name',
    field: 'name',
    sortable: true
  },
  {
    name: 'status',
    label: 'Status',
    field: 'status',
    sortable: true
  },
  {
    name: 'cargoType',
    label: 'Cargo Type',
    field: 'charterParty.cargoType',
    sortable: true
  },
  {
    name: 'startDate',
    label: 'Start Date',
    field: 'charterParty.startDate',
    sortable: true
  },
  {
    name: 'endDate',
    label: 'End Date',
    field: 'charterParty.endDate',
    sortable: true
  },
  {
    name: 'expectedArrival',
    label: 'Expected Arrival',
    field: 'loadPortOperations.expectedArrival',
    sortable: true
  },
  {
    name: 'actualArrival',
    label: 'Actual Arrival',
    field: 'loadPortOperations.actualArrival',
    sortable: true
  },
  {
    name: 'expectedDeparture',
    label: 'Expected Departure',
    field: 'dischargePortOperations.expectedDeparture',
    sortable: true
  },
  {
    name: 'actualDeparture',
    label: 'Actual Departure',
    field: 'dischargePortOperations.actualDeparture',
    sortable: true
  }
])

Q-Table组件代码：

<div class="q-pa-md">
    <q-table :rows="ships" :columns="columns" row-key="name" flat bordered />
</div>

当前仅name和status字段能正常显示，嵌套对象CharterParty、LoadPortOperations和DischargePortOperations对应的列无法显示数据。

问题主要源于Q-Table对嵌套字段的处理逻辑，以及数据类型的渲染问题，以下是具体解决步骤：

1. 修复嵌套字段的访问逻辑 #

Quasar的Q-Table默认不支持直接通过点语法（如charterParty.cargoType）读取嵌套对象字段，需要通过以下两种方式处理：

方式一：将field设为提取函数 #

直接在field中定义函数，从行数据里提取嵌套字段，同时用可选链避免空值报错：

const columns = ref([
  // ... 保留name、status列
  {
    name: 'cargoType',
    label: 'Cargo Type',
    field: row => row.charterParty?.cargoType,
    sortable: true
  },
  {
    name: 'startDate',
    label: 'Start Date',
    field: row => row.charterParty?.startDate,
    sortable: true
  },
  // 其余嵌套字段按此格式修改
])

方式二：使用format函数处理显示 #

保留原field的点语法，通过format函数确保数据正常渲染：

const columns = ref([
  // ... 保留name、status列
  {
    name: 'cargoType',
    label: 'Cargo Type',
    field: 'charterParty.cargoType',
    format: val => val ?? '', // 空值时显示空字符串
    sortable: true
  },
  // 其余嵌套字段按此格式添加format
])

2. 处理Date类型数据的渲染 #

嵌套字段中的Date类型无法直接在表格中显示为可读格式，需要在format函数中转换为字符串：

{
  name: 'startDate',
  label: 'Start Date',
  field: row => row.charterParty?.startDate,
  format: val => val ? new Date(val).toLocaleString() : '',
  sortable: true
}

3. 确保数据初始化完整 #

检查ships数组中的数据，确保嵌套对象已正确初始化，避免出现undefined：

const ships = ref<Ship[]>([
  {
    name: 'Ship A',
    status: 'Sailing',
    charterParty: {
      startDate: new Date(),
      endDate: new Date(Date.now() + 86400000),
      cargoType: 'Coal'
    },
    loadPortOperations: {
      expectedArrival: new Date(),
      actualArrival: new Date(),
      expectedDeparture: new Date(),
      actualDeparture: new Date()
    },
    dischargePortOperations: {
      expectedArrival: new Date(),
      actualArrival: new Date(),
      expectedDeparture: new Date(),
      actualDeparture: new Date()
    }
  }
])

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