Vuetify v-data-table报错：item属性类型校验失败，期望Object却得到Array

错误原因 #

1. v-data-table的items类型不匹配：Vuetify的v-data-table要求:items绑定的是对象数组（每个元素是键值对对象），但你当前的excelData是二维数组（每行都是数组），组件校验时自然会抛出类型错误。
2. 表头与数据未分离：你把Excel的表头行（rows[0]）也存入了excelData，导致表格会把表头当成普通数据行渲染，逻辑上也不合理。

修正后的代码 #

<template>
    <div>
        <h1>EXCEL</h1>
        <input id="excelFile" type="file" @change="uploadExcel()" accept=".xlsx,.xls"/>
        <v-data-table
            v-if="excelData.length > 0"
            :headers="excelHeaders"
            :items="excelData"
        >
        </v-data-table>
    </div>
</template>

<script>
import readXlsFile from 'read-excel-file'

export default {
    data() {
        return {
            excelData: [],
            excelHeaders: [],
        }
    },
    methods: {
        async uploadExcel() {
            const input = document.getElementById('excelFile')
            if (!input.files.length) return
            
            try {
                const rows = await readXlsFile(input.files[0])
                // 分离表头和数据行
                const [headerRow, ...dataRows] = rows
                
                // 生成v-data-table需要的表头格式
                this.excelHeaders = headerRow.map((text, index) => ({
                    text,
                    value: `col${index}` // 用统一格式的字段名代替索引字符串
                }))
                
                // 将二维数组转成对象数组，适配v-data-table的items要求
                this.excelData = dataRows.map(row => {
                    return row.reduce((obj, value, index) => {
                        obj[`col${index}`] = value
                        return obj
                    }, {})
                })
            } catch (err) {
                console.error('Excel读取失败:', err)
            }
        },
    }
}
</script>

更优雅的实现方案 #

1. 替换原生input为Vuetify组件 #

用Vuetify的v-file-input代替原生input，风格更统一，还自带文件类型校验：

<v-file-input
    label="选择Excel文件"
    accept=".xlsx,.xls"
    @change="uploadExcel"
></v-file-input>

此时无需getElementById，直接用参数获取文件：

async uploadExcel(file) {
    if (!file) return
    try {
        const rows = await readXlsFile(file)
        // 后续逻辑同上
    } catch (err) {
        console.error('Excel读取失败:', err)
    }
}

2. 数据清理与状态管理 #

每次上传新文件前，先清空之前的excelData和excelHeaders，避免旧数据残留：

async uploadExcel(file) {
    if (!file) return
    // 清空旧数据
    this.excelData = []
    this.excelHeaders = []
    
    try {
        // 读取文件逻辑
    } catch (err) {
        console.error('Excel读取失败:', err)
    }
}

3. 表头字段名优化 #

如果Excel表头有唯一标识（比如英文字段名），可以直接用表头文本作为value，后续图表渲染时更直观：

this.excelHeaders = headerRow.map(text => ({
    text,
    value: text.replace(/\s+/g, '_') // 替换空格为下划线，避免字段名异常
}))

this.excelData = dataRows.map(row => {
    return row.reduce((obj, value, index) => {
        obj[headerRow[index].replace(/\s+/g, '_')] = value
        return obj
    }, {})
})

4. 增加加载状态 #

添加加载提示，提升用户体验：

<template>
    <div>
        <h1>EXCEL</h1>
        <v-file-input
            label="选择Excel文件"
            accept=".xlsx,.xls"
            @change="uploadExcel"
            :disabled="isLoading"
        ></v-file-input>
        <v-progress-circular
            v-if="isLoading"
            indeterminate
            size="40"
        ></v-progress-circular>
        <v-data-table
            v-if="excelData.length > 0"
            :headers="excelHeaders"
            :items="excelData"
        >
        </v-data-table>
    </div>
</template>

<script>
// ...
data() {
    return {
        excelData: [],
        excelHeaders: [],
        isLoading: false,
    }
},
methods: {
    async uploadExcel(file) {
        if (!file) return
        this.excelData = []
        this.excelHeaders = []
        this.isLoading = true
        
        try {
            const rows = await readXlsFile(file)
            // 处理数据逻辑
        } catch (err) {
            console.error('Excel读取失败:', err)
        } finally {
            this.isLoading = false
        }
    },
}
</script>

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