Vuestic va-data-table自定义单元格：对象类型value能否直接使用？

核心结论 #

完全可以直接访问对象类型的属性，无需通过字符串拆分的临时方案。问题通常出在列配置或对插槽参数的使用上，以下是两种可靠解决方法：

方法1：确保列配置未触发默认字符串转换 #

如果你的数据项中street是对象类型（比如{ number: '123', streetName: 'Main St' }），列配置只需指向该属性，不要添加会将对象转为字符串的formatter：

// 正确的列配置
columns: [
  { key: 'street', title: '街道' },
  // 其他列...
]

此时插槽中直接获取的value就是原对象，可直接访问属性：

<template>
  <va-data-table :items="items" :columns="columns">
    <template #cell(street)="{ value }">
      <va-chip size="small">{{ value.number }}, {{ value.streetName }}</va-chip>
    </template>
  </va-data-table>
</template>

方法2：直接使用插槽参数中的原始行数据 #

如果因为列配置的formatter导致value被转为字符串，可直接通过插槽的item参数获取原始行对象，绕过格式化后的value：

<template>
  <va-data-table :items="items" :columns="columns">
    <template #cell(street)="{ item }">
      <va-chip size="small">{{ item.street.number }}, {{ item.street.streetName }}</va-chip>
    </template>
  </va-data-table>
</template>

这种方法更稳定，不受列配置中formatter的影响。

为什么之前会显示[object Object]？ #

VaDataTable默认会对未通过插槽自定义的单元格调用toString()方法渲染内容，对象类型调用该方法就会得到[object Object]。但自定义插槽时，只要正确获取原始数据，就可以避免这个问题。

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