vue3实现在线编辑表格类似Excel

Vue3可以使用element-plus和xlsx来实现在线编辑表格类似Excel的效果。

首先，使用element-plus中的el-table组件来展示表格数据，并使用el-form组件来实现编辑表格数据的功能。使用xlsx组件来实现将表格数据导出为Excel文件，以及将Excel文件导入为表格数据的功能。

以下是一个简单的示例代码：

<template>
  <div>
    <el-button @click="exportExcel">导出Excel</el-button>
    <el-button @click="importExcel">导入Excel</el-button>
    <el-table :data="tableData" :key="tableKey" ref="table">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age">
        <template #default="{row}">
          <el-form-item>
            <el-input v-model="row.age"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="性别" prop="gender">
        <template #default="{row}">
          <el-form-item>
            <el-radio-group v-model="row.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import XLSX from 'xlsx';

export default {
  setup() {
    const tableData = ref([
      { name: '张三', age: 18, gender: 'male' },
      { name: '李四', age: 20, gender: 'female' },
      { name: '王五', age: 22, gender: 'male' },
    ]);
    const tableKey = ref(0);

    const exportExcel = () => {
      const header = ['姓名', '年龄', '性别'];
      const data = tableData.value.map((item) => [item.name, item.age, item.gender]);
      const sheet = XLSX.utils.aoa_to_sheet([header, ...data]);
      const book = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(book, sheet, 'Sheet1');
      XLSX.writeFile(book, 'table.xlsx');
    };

    const importExcel = async () => {
      const file = await new Promise((resolve) => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.xlsx';
        input.onchange = () => resolve(input.files[0]);
        input.click();
      });
      if (!file) return;
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const sheet = workbook.Sheets[workbook.SheetNames[0]];
        const aoa = XLSX.utils.sheet_to_json(sheet, { header: 1 });
        if (aoa.length < 2) {
          ElMessage.error('Excel文件格式不正确');
          return;
        }
        const header = aoa[0];
        const newData = aoa.slice(1).map((row) => {
          const obj = {};
          header.forEach((key, index) => {
            obj[key] = row[index];
          });
          return obj;
        });
        tableData.value = newData;
        tableKey.value++;
        ElMessage.success('导入成功');
      };
      reader.readAsArrayBuffer(file);
    };

    return {
      tableData,
      tableKey,
      exportExcel,
      importExcel,
    };
  },
};

在这个示例中，使用ref来定义tableData和tableKey，分别表示表格数据和表格的key值。在el-table-column中使用template来自定义表格单元格的内容，使用el-form-item和相应的表单控件来实现编辑功能。在exportExcel函数中，使用xlsx将表格数据导出为Excel文件；在importExcel函数中，通过创建input元素来让用户选择要导入的Excel文件，并使用xlsx将Excel文件转换为表格数据。