vue3-table-lite

Vue 3 Table Lite 是一个专为 VueJS Web 框架设计的数据表库。

¥Vue 3 Table Lite is a data table library designed for the VueJS web framework.

SheetJS 是一个用于从电子表格读取和写入数据的 JavaScript 库。

¥SheetJS is a JavaScript library for reading and writing data from spreadsheets.

此演示使用 Vue 3 Table Lite 和 SheetJS 从电子表格中提取数据并在数据表中显示内容。我们将探讨如何将数据从文件导入到数据网格以及如何将修改后的数据从网格导出到工作簿。

¥This demo uses Vue 3 Table Lite and SheetJS to pull data from a spreadsheet and display the content in a data table. We'll explore how to import data from files into the data grid and how to export modified data from the grid to workbooks.

"演示" 部分包括一个完整的示例，该示例显示用户提供的工作表中的数据并将数据导出到 XLSX 工作簿：

¥The "Demo" section includes a complete example that displays data from user-supplied sheets and exports data to XLSX workbooks:

vue3-table-lite screenshot

测试部署

该演示在以下部署中进行了测试：

¥This demo was tested in the following deployments:

浏览器	版本	日期
Chromium 125	`1.4.0`	2024-06-13

集成详情

¥Integration Details

"构架" 章节涵盖使用 Vue 3 Table Lite 在 ViteJS 项目中的安装。

¥The "Frameworks" section covers installation in ViteJS projects using Vue 3 Table Lite.

使用 npm 工具，此命令将安装 SheetJS 和 Vue 3 Table Lite：

¥Using the npm tool, this command installs SheetJS and Vue 3 Table Lite:

npm i -S https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz vue3-table-lite@1.4.0

行和列绑定

¥Rows and Columns Bindings

Vue 3 Table Lite 提供了两个属性绑定：列元数据数组 (columns) 和表示显示数据的对象数组 (rows)。通常两者都是 ref 对象：

¥Vue 3 Table Lite presents two attribute bindings: an array of column metadata (columns) and an array of objects representing the displayed data (rows). Typically both are ref objects:

<script setup lang="ts">
import { ref } from "vue";
import VueTableLite from "vue3-table-lite/ts";

/* rows */
type Row = any[];
const rows = ref<Row[]>([]);

/* columns */
type Column = { field: string; label: string; };
const columns = ref<Column[]>([]);
</script>

<template>
  <vue-table-lite :columns="columns" :rows="rows"></vue-table-lite>
</template>

这些可以通过 VueJS 生命周期方法中的 value 属性进行改变：

¥These can be mutated through the value property in VueJS lifecycle methods:

import { onMounted } from "vue";
onMounted(() => {
  columns.value = [ { field: "name", label: "Names" }];
  rows.value = [ { name: "SheetJS" }, { name: "VueJS" } ];
})

最通用的数据表示是数组的数组。为了满足网格，列必须是其 field 属性是转换为字符串的索引的对象：

¥The most generic data representation is an array of arrays. To sate the grid, columns must be objects whose field property is the index converted to string:

import { ref } from "vue";
import { utils } from 'xlsx';

/* generate row and column data */
function ws_to_vtl(ws) {
  /* create an array of arrays */
  const rows = utils.sheet_to_json(ws, { header: 1 });

  /* create column array */
  const range = utils.decode_range(ws["!ref"]||"A1");
  const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({
    field: String(i), // vtl will access row["0"], row["1"], etc
    label: utils.encode_col(i), // the column labels will be A, B, etc
  }));

  return { rows, columns };
}

const rows = ref([]);
const columns = ref([]);

/* update refs */
function update_refs(ws) {
  const data = ws_to_vtl(ws);
  rows.value = data.rows;
  columns.value = data.columns;
}

另一方面，可以使用 aoa_to_sheet 生成工作表：

¥In the other direction, a worksheet can be generated with aoa_to_sheet:

import { utils } from 'xlsx';

const rows = ref([]);

function vtl_to_ws(rows) {
  return utils.aoa_to_sheet(rows.value);
}

演示

¥Demo

使用 VueJS + TypeScript 模板创建一个新的 ViteJS 应用：

¥Create a new ViteJS App using the VueJS + TypeScript template:

npm create vite@latest sheetjs-vtl -- --template vue-ts
cd sheetjs-vtl

安装依赖：

¥Install dependencies:

npm i -S https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz vue3-table-lite@1.4.0

下载 src/App.vue 并替换内容：

¥Download src/App.vue and replace the contents:

curl -L -o src/App.vue https://xlsx.nodejs.cn/vtl/App.vue

启动开发服务器：

¥Start the dev server:

npm run dev

在 Web 浏览器中加载显示的 URL（通常为 http://localhost:5173）。

¥Load the displayed URL (typically http://localhost:5173) in a web browser.

当页面加载时，它将尝试获取 https://xlsx.nodejs.cn/pres.numbers 并显示数据。单击 "导出" 生成工作簿。

¥When the page loads, it will try to fetch https://xlsx.nodejs.cn/pres.numbers and display the data. Click "Export" to generate a workbook.

集成详情​

行和列绑定​

演示​

集成详情

行和列绑定

演示