如何在Vuetify v-data-iterator中自定义JS对象键的显示名称？

你可以通过两种方式实现原始键名到友好显示名称的转换：

方法一：自定义键名映射对象 #

创建键名与显示名称的映射表，精准控制每个字段的显示文本：

1. 在组件中定义映射对象：

// Options API
data() {
  return {
    keys: [
      'Currency',
      'Price',
      'price_date',
      'num_of_exchanges',
      'market_cap',
      'market_cap_dominance',
      'High',
      'high_time_stamp',
    ],
    keyDisplayNames: {
      'Currency': 'Currency',
      'Price': 'Price',
      'price_date': 'Price date',
      'num_of_exchanges': 'Number of Exchanges',
      'market_cap': 'Market Cap',
      'market_cap_dominance': 'Market Cap Dominance',
      'High': 'High',
      'high_time_stamp': 'High Timestamp'
    }
  }
}

// Composition API (Vue 3)
const keys = ref([
  'Currency',
  'Price',
  'price_date',
  'num_of_exchanges',
  'market_cap',
  'market_cap_dominance',
  'High',
  'high_time_stamp',
])
const keyDisplayNames = ref({
  'Currency': 'Currency',
  'Price': 'Price',
  'price_date': 'Price date',
  'num_of_exchanges': 'Number of Exchanges',
  'market_cap': 'Market Cap',
  'market_cap_dominance': 'Market Cap Dominance',
  'High': 'High',
  'high_time_stamp': 'High Timestamp'
})

2. 在v-data-iterator模板中使用映射对象：

<v-data-iterator :items="yourCryptoData">
  <template v-slot:item="{ item }">
    <div class="crypto-row">
      <div v-for="key in keys" :key="key" class="crypto-field">
        <strong>{{ keyDisplayNames[key] }}</strong>: {{ item[key] }}
      </div>
    </div>
  </template>
</v-data-iterator>

方法二：通用键名格式化函数 #

如果大部分键名是下划线分隔格式，可通过工具函数自动转换，减少重复配置：

1. 定义格式化函数：

// Options API
methods: {
  formatKeyName(key) {
    return key.split('_')
      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
      .join(' ')
  }
}

// Composition API
const formatKeyName = (key) => {
  return key.split('_')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')
}

2. 在模板中调用函数：

<v-data-iterator :items="yourCryptoData">
  <template v-slot:item="{ item }">
    <div class="crypto-row">
      <div v-for="key in keys" :key="key" class="crypto-field">
        <strong>{{ formatKeyName(key) }}</strong>: {{ item[key] }}
      </div>
    </div>
  </template>
</v-data-iterator>

该方法会自动将price_date转为Price Date、num_of_exchanges转为Num Of Exchanges，若需个别字段特殊调整，可在函数内添加判断逻辑，或结合映射对象使用。

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