Vue3 jgile/vue-csv-import组件保存/注入映射配置实现方案咨询

问题修复点 #

你当前代码无法修改映射字段的核心原因有2个：

• 遗漏了script setup中ref实例必须加.value的语法要求
• 多嵌套了一层不存在的VueCsvImportData属性，组件实例上直接就有map属性

实现方案 #

方案1：直接操作组件实例实现自动映射 #

不需要单独给VueCsvMap传props，vue-csv-import根组件的map属性是响应式的，修改后会自动同步到内部的映射组件：

1. 给vue-csv-import绑定@file-parsed事件，确保csv文件解析完成、map初始化后再赋值你保存的映射
2. 修改映射的语法调整为正确的ref调用格式

方案2：双向绑定映射实现直接复用 #

最新版vue-csv-import支持map的双向绑定，你可以直接在根组件上绑定你本地保存的映射对象，组件会自动完成匹配：
给<vue-csv-import>添加v-model:map="savedMap"属性，其中savedMap就是你此前存储的映射配置对象。

修正后的核心代码示例 #

<template>
<div v-if="checkUser" class="h-screen flex flex-col p-6 w-full">
    <div class="mb-4">
        <span class="text-xl font-heading">CSV Upload</span>
    </div>
    <vue-csv-import
        v-model="csv"
        v-model:map="savedMap" 
        ref="VueCsvImportData"
        :fields="felder"
        @file-parsed="handleFileParsed"
        v-bind:text="{
            toggleHeaders: 'Erste Zeile ist Überschrift',
            fieldColumn: 'Feld',
            csvColumn: 'CSV Spaltenbezeichnung'
            }" 
        >
        <div>
            <vue-csv-errors></vue-csv-errors>
        </div>
        <div class="mt-4">
            <vue-csv-input></vue-csv-input>
        </div>
        <div class="mt-4">
            <vue-csv-toggle-headers 
                v-bind:labelAttributes="{class: 'text-blue-500 font-heading'}"
                v-bind:checkboxAttributes="{class: 'checked:bg-blue-600'}"
                >
            </vue-csv-toggle-headers>
        </div>
        <div class="mt-4 w-full">
            <vue-csv-map
                v-bind:selectAttributes="{class: 'rounded border-2 border-gray-300 w-11/12'}"
            >
            </vue-csv-map>
        </div>
    </vue-csv-import>
    
    <div class="mt-4">
        <knopf @click.prevent="senden" v-bind:knopfValues="{ name: 'Senden!!', bg: 'bg-yellow-500', txt: 'text-white'}"/>
    </div>
   
    <div v-if="VueCsvImportData" class="mt-4">
        {{ VueCsvImportData?.value?.map }}
        <span v-on:click="changeMap">Change</span>
    </div>
    <div class="mt-4">
        {{ csv }}
    </div>
</div>
</template>

<script setup>
import { ref, watchEffect, onMounted } from 'vue'
import { useStore } from 'vuex'
import axios from '../axioscustom.js'
import Knopf from '../components/Knopf.vue'

const store = useStore()
const csv = ref()
const VueCsvImportData = ref(null)
// 这里替换成你从本地存储/接口拿到的已保存映射
const savedMap = ref({
  ks_tgz: 99 // 你需要预设的映射值
})

const handleFileParsed = () => {
  // 如果没有用v-model:map的双向绑定，也可以在这里手动赋值映射
  // VueCsvImportData.value.map = 你保存的映射对象
}

const changeMap = () => {
  // 修正后的修改映射语法
  if(VueCsvImportData.value) {
    VueCsvImportData.value.map.ks_tgz = 99
    // 修改完成后你可以把savedMap存到localStorage或者后端接口，下次直接复用
    localStorage.setItem('csvImportMap', JSON.stringify(savedMap.value))
  }
}
</script>

注意事项 #

• 如果你的映射字段和csv表头是固定匹配关系，也可以在组件初始化时直接给savedMap赋值你存储的历史映射，组件加载完成后会自动完成匹配
• 映射的value值对应csv表头的索引位置，如果你是按表头名称保存的映射，需要先解析完csv表头后，把名称转换成对应索引再赋值给map

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