当前位置：首页 > VUE

vue实现表格导入

2026-01-14 23:25:17VUE

Vue 实现表格导入的方法

使用 Element UI 的 Upload 组件

Element UI 提供了 el-upload 组件，可以方便地实现文件上传功能。结合 xlsx 库解析 Excel 文件，将数据导入表格。

安装依赖：

npm install element-ui xlsx

示例代码：

<template>
  <div>
    <el-upload
      action=""
      :auto-upload="false"
      :on-change="handleFileChange"
      accept=".xlsx, .xls"
    >
      <el-button type="primary">导入 Excel</el-button>
    </el-upload>
    <el-table :data="tableData">
      <el-table-column
        v-for="(header, index) in tableHeaders"
        :key="index"
        :prop="header"
        :label="header"
      />
    </el-table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      tableData: [],
      tableHeaders: [],
    };
  },
  methods: {
    handleFileChange(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(firstSheet);
        this.tableHeaders = Object.keys(jsonData[0]);
        this.tableData = jsonData;
      };
      reader.readAsArrayBuffer(file.raw);
    },
  },
};
</script>

使用原生 input 和 FileReader

如果不使用 UI 框架，可以通过原生 input 元素和 FileReader 实现文件读取。

示例代码：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept=".xlsx, .xls" />
    <table>
      <thead>
        <tr>
          <th v-for="(header, index) in tableHeaders" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in tableData" :key="index">
          <td v-for="(header, i) in tableHeaders" :key="i">{{ row[header] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      tableData: [],
      tableHeaders: [],
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(firstSheet);
        this.tableHeaders = Object.keys(jsonData[0]);
        this.tableData = jsonData;
      };
      reader.readAsArrayBuffer(file);
    },
  },
};
</script>

使用第三方库 vue-json-excel

如果需要将数据导出为 Excel，可以使用 vue-json-excel 库。

安装依赖：

npm install vue-json-excel

示例代码：

<template>
  <div>
    <download-excel :data="tableData" :fields="tableHeaders">
      <el-button type="success">导出 Excel</el-button>
    </download-excel>
  </div>
</template>

<script>
import DownloadExcel from 'vue-json-excel';

export default {
  components: {
    DownloadExcel,
  },
  data() {
    return {
      tableData: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
      ],
      tableHeaders: {
        name: 'Name',
        age: 'Age',
      },
    };
  },
};
</script>