Vue JS多列下拉组件开发求助：读取本地CSV实现费用选择

1. 先解决CSV解析问题 #

你之前的核心问题是没把CSV字符串转换成结构化数据，导致每行只能当成纯文本渲染。先把本地CSV文件解析成包含国家、日补贴、夜补贴的对象数组：

解析逻辑（Vue 3 示例）

<script setup>
import { ref, onMounted } from 'vue'

const countryAllowances = ref([]) // 存储解析后的结构化数据
const selectedCountry = ref(null) // 存储选中的国家对象

// 手动解析CSV为对象数组（无需第三方库）
const parseCsv = (csvStr) => {
  // 按行分割，过滤空行
  const lines = csvStr.split('\n').filter(line => line.trim())
  // 获取表头
  const headers = lines[0].split(',').map(h => h.trim())
  // 转换每行数据为对象
  return lines.slice(1).map(line => {
    const values = line.split(',').map(v => v.trim())
    return {
      country: values[0],
      dailyAllowance: Number(values[1]), // 转成数字方便后续计算
      nightAllowance: Number(values[2])
    }
  })
}

// 读取本地CSV文件（假设文件放在public目录下）
onMounted(async () => {
  try {
    const res = await fetch('/allowances.csv')
    const csvText = await res.text()
    countryAllowances.value = parseCsv(csvText)
  } catch (err) {
    console.error('CSV读取失败:', err)
  }
})
</script>

2. 构建三列布局的自定义下拉组件 #

原生<select>无法实现多列展示，所以用自定义下拉组件来实现：

模板代码

<template>
  <div class="allowance-dropdown">
    <!-- 下拉触发器 -->
    <div class="dropdown-header" @click="isOpen = !isOpen">
      {{ selectedCountry 
        ? `${selectedCountry.country} | 日补: ${selectedCountry.dailyAllowance} | 夜补: ${selectedCountry.nightAllowance}` 
        : '选择出差国家' 
      }}
    </div>

    <!-- 下拉选项列表 -->
    <div v-show="isOpen" class="dropdown-list">
      <div 
        v-for="item in countryAllowances" 
        :key="item.country"
        class="dropdown-item"
        @click="selectItem(item)"
      >
        <span class="col-country">{{ item.country }}</span>
        <span class="col-amount">{{ item.dailyAllowance }}</span>
        <span class="col-amount">{{ item.nightAllowance }}</span>
      </div>
    </div>
  </div>
</template>

样式代码（保证三列对齐）

<style scoped>
.allowance-dropdown {
  position: relative;
  width: 450px;
  margin: 1rem;
}

.dropdown-header {
  padding: 0.8rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
}

.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
  z-index: 10;
}

.dropdown-item {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: #fafafa;
}

.col-country {
  width: 40%;
}

.col-amount {
  width: 30%;
  text-align: right;
}
</style>

补充选中逻辑

在<script setup>里添加：

const isOpen = ref(false)

const selectItem = (item) => {
  selectedCountry.value = { ...item } // 生成选中属性的对象
  isOpen.value = false
}

关键说明 #

• 解析CSV时要处理空行、首尾空格，同时把补贴金额转成数字类型，避免后续计算出错。
• 自定义下拉组件能灵活实现多列布局，选中后selectedCountry就是你需要的结构化对象，直接用于行程成本计算即可。

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