vue3 在线表格编辑

Vue3提供了强大的功能和API来实现在线表格编辑。下面是一个简单的示例：

1. 首先，你需要安装所需的依赖包。在命令行中运行以下命令：

npm install exceljs file-saver luckyexcel

2. 在你的Vue项目中创建一个表格组件，例如`TableEditor.vue`。

3. 在`TableEditor.vue`中引入所需的依赖包和样式：

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';
import LuckyExcel from 'luckyexcel';
import 'luckyexcel/css/luckysheet.css';

4. 在`TableEditor.vue`的模板中添加一个包含表格的容器：

<template>
  <div id="table-container"></div>
</template>

5. 在`TableEditor.vue`的脚本中，使用Vue的生命周期钩子函数`mounted`来初始化表格：

<script>
export default {
  mounted() {
    // 创建一个ExcelJS工作簿
    const workbook = new ExcelJS.Workbook();

    // 创建一个工作表
    const worksheet = workbook.addWorksheet('Sheet1');

    // 在工作表中添加一些数据
    worksheet.getCell('A1').value = 'Name';
    worksheet.getCell('B1').value = 'Age';    worksheet.getCell('A2').value = 'John';
    worksheet.getCell('B2').value = 25;
    worksheet.getCell('A3').value = 'Jane';
    worksheet.getCell('B3').value = 30;

    // 将工作表渲染到指定的容器中
    LuckyExcel.transformSingleSheet({
      container: 'table-container',
      data: worksheet,
      width: '100%',
      height: '100%',
    });
  },
};
</script>

6. 在你的Vue页面中使用`TableEditor`组件：

<template>
  <div>
    <table-editor></table-editor>
  </div>
</template>

<script>
import TableEditor from './TableEditor.vue';

export default {
  components: {
    TableEditor,
  },
};
</script>

这样，你就可以在Vue3中实现一个简单的在线表格编辑功能了。