本文介绍如何在 vue.js 项目中构建一个功能完整、用户体验清晰的国家费用选择组件：支持从本地 csv 数据加载国家列表及对应的日/夜费率，并在选择后实时显示结构化费用信息，避免将多列数据拼接为不可交互的字符串。
本文介绍如何在 vue.js 项目中构建一个功能完整、用户体验清晰的国家费用选择组件：支持从本地 csv 数据加载国家列表及对应的日/夜费率，并在选择后实时显示结构化费用信息，避免将多列数据拼接为不可交互的字符串。
在实际业务场景（如员工差旅成本核算系统）中，常需基于国家维度动态获取差异化费率。虽然原需求提出“三列下拉框”，但 HTML 原生 <select> 元素不支持多列渲染——强行用 <span> 拼接会导致语义丢失、可访问性差、无法对齐且难以维护。因此，更专业、可持续的方案是：分离选择与展示逻辑——下拉框专注国家选择，下方区域结构化呈现对应费用。
以下是一个生产就绪的 Vue 2/3 兼容实现（以 Vue 2 语法为例，Vue 3 可轻松迁移至 Composition API）：
<template>
<div class="country-fee-selector">
<label for="countrySelect" class="selector-label">Select a country:</label>
<select
id="countrySelect"
v-model="selectedCountry"
class="country-select"
@change="onCountryChange"
>
<option value="" disabled>Select a country...</option>
<option
v-for="country in countries"
:key="country.value"
:value="country.value"
>
{{ country.name }}
</option>
</select>
<div v-if="selectedCountry" class="fee-display">
<h3>{{ getCountryName(selectedCountry) }}</h3>
<dl class="fee-list">
<div class="fee-item">
<dt>Day Fee:</dt>
<dd>{{ getDayFee(selectedCountry) }} €</dd>
</div>
<div class="fee-item">
<dt>Night Fee:</dt>
<dd>{{ getNightFee(selectedCountry) }} €</dd>
</div>
</dl>
<!-- 可选：导出为对象供父组件使用 -->
<div class="selected-object">
<strong>Selected object:</strong>
<pre>{{ JSON.stringify(selectedObject, null, 2) }}</pre>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CountryFeeSelector',
data() {
return {
selectedCountry: '',
// 示例数据 —— 实际项目中应从 CSV 解析注入
countries: [
{ name: 'United States', value: 'usa', dayFee: 120.5, nightFee: 180.0 },
{ name: 'Canada', value: 'canada', dayFee: 95.0, nightFee: 142.5 },
{ name: 'Germany', value: 'germany', dayFee: 110.0, nightFee: 165.0 },
{ name: 'Japan', value: 'japan', dayFee: 150.0, nightFee: 225.0 }
]
}
},
computed: {
selectedObject() {
const country = this.countries.find(c => c.value === this.selectedCountry)
return country ? {
country: country.name,
countryCode: country.value,
dayFee: country.dayFee,
nightFee: country.nightFee,
total: country.dayFee + country.nightFee
} : null
}
},
methods: {
getCountryName(value) {
const country = this.countries.find(c => c.value === value)
return country ? country.name : ''
},
getDayFee(value) {
const country = this.countries.find(c => c.value === value)
return country ? country.dayFee.toFixed(2) : '–'
},
getNightFee(value) {
const country = this.countries.find(c => c.value === value)
return country ? country.nightFee.toFixed(2) : '–'
},
onCountryChange() {
// 可在此触发事件，通知父组件
this.$emit('country-selected', this.selectedObject)
}
}
}
</script>
<style scoped>
.country-fee-selector { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.selector-label { display: block; margin: 1rem 0 0.5rem; font-weight: 600; }
.country-select { padding: 0.5rem; border-radius: 4px; border: 1px solid #ccc; width: 220px; }
.fee-display { margin-top: 1.2rem; padding: 1rem; background-color: #f9f9f9; border-radius: 4px; }
.fee-display h3 { margin: 0 0 0.75rem 0; font-size: 1.1rem; color: #2c3e50; }
.fee-list { display: grid; grid-template-columns: 80px 1fr; gap: 0.5rem; }
.fee-item dt { font-weight: 600; color: #34495e; }
.fee-item dd { margin: 0; color: #2c3e50; }
.selected-object { margin-top: 1rem; font-size: 0.85rem; }
.selected-object pre { background: #2c3e50; color: #ecf0f1; padding: 0.5rem; border-radius: 3px; overflow-x: auto; }
</style>✅ 关键设计说明：
- 使用 computed 属性 selectedObject 自动构建结构化选中对象，含国家名、编码、日/夜费率及合计值，可直接用于后续计算或提交；
- 通过 @change 和 $emit 支持父子组件通信，便于集成到表单或路由逻辑中；
- 样式采用语义化 <dl> 布局确保多列信息对齐清晰，响应式友好；
- 所有金额保留两位小数并添加货币符号，提升专业度。
⚠️ 关于 CSV 数据接入的重要提示：
由于浏览器端无法直接读取本地文件系统路径（安全限制），若 CSV 存于 public/ 目录（如 public/countries.csv），推荐使用 Papa Parse 在 mounted() 钩子中异步加载并解析：
import Papa from 'papaparse'
// 在 mounted 中：
mounted() {
Papa.parse('/countries.csv', {
download: true,
header: true,
complete: (result) => {
this.countries = result.data.map(row => ({
name: row.country,
value: row.code.toLowerCase(),
dayFee: parseFloat(row.day_fee),
nightFee: parseFloat(row.night_fee)
}))
}
})
}CSV 文件格式示例（countries.csv）：
立即学习“前端免费学习笔记（深入）”；
country,code,day_fee,night_fee United States,USA,120.5,180.0 Canada,CAN,95.0,142.5
该方案兼顾可维护性、可访问性与扩展性，既满足当前需求，也为未来支持搜索、分页、国际化或多币种打下基础。
