前端excel上传表格展示 并且可以编辑 使用elementui组件库和vue3

在前端使用Element UI组件库和Vue 3开发Excel文件上传、展示以及表格编辑的功能，你可以按照以下步骤进行：

1. **安装依赖**：
- 首先，你需要安装`axios`用于发送HTTP请求，`xlsx`处理Excel文件，以及`element-ui`及其相关的组件。

   npm install axios xlsx element-ui @vue/cli-plugin-element

2. **引入组件**：
在项目里引入Element UI的FilePicker（文件选择器）和ElTable（表格）组件，以及其他必要的表单组件。

3. **创建上传函数**：
使用axios将文件上传到服务器，然后获取返回的数据，通常会包含文件ID或URL以便后续操作。

async uploadExcel(file) {
  try {
    const formData = new FormData();
    formData.append('file', file);
    
    // 发送POST请求并获取响应数据
    const response = await axios.post('/api/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}});
    this.excelData = response.data; // 存储Excel数据
  } catch (error) {
    console.error('Upload error:', error);
  }
}

4. **解析和显示Excel内容**：
利用`xlsx`库读取Excel内容，将其转换成表格数据格式，并渲染到ElTable上。

import { use } from 'vue-router';
const { readFileSync } = require('fs');

//...
created() {
  if (this.excelData) {
    const workbook = XLSX.read(this.excelData.content, {type: 'buffer'});
    const sheetName = workbook.SheetNames[0];
    const data = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
    this.tableData = data;
  }
}

mounted() {
  this.$el.addEventListener('drop', e => {
    e.preventDefault();
    this.uploadExcel(e.target.files[0]);
  });
}

5. **编辑功能**：
使用ElTable的内置编辑功能，如`:edit-row`属性配合`row-class-name`自定义样式，用户可以直接在表格中修改数据。如果需要更复杂的编辑操作，可以考虑使用第三方组件或封装定制化的编辑组件。

6. **样式和布局**：
使用Element UI提供的样式和组件构建清晰的界面，包括上传按钮、加载指示器和表格区域。

<template>
  <div>
    <el-button type="primary" @click.prevent="upload">上传Excel</el-button>
    <el-loading :visible="isLoading" />
    <el-table :data="tableData" ref="etable" :editable="true" :row-class-name="rowClassName">
      <!-- ... -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      isLoading: false,
    };
  },
  methods: {
    ... // 以上方法
    rowClassName({row, rowIndex}) {
      return rowIndex % 2 === 0 ? 'odd' : 'even';
    }
  },
  mounted() {
    // ...
  }
};
</script>