js表格编辑插件，x-data-spreadsheet 如何使用、用法

x-data-spreadsheet 在 Vue 3 中的用法

1. 安装与引入

• 安装：

  npm install x-data-spreadsheet
  

• 引入：

  <script setup>
  import Spreadsheet from 'x-data-spreadsheet';
  import 'x-data-spreadsheet/dist/xspreadsheet.css';
  </script>
  

• 基本使用：

  <template>
    <div ref="spreadsheetContainer" style="width: 100%; height: 600px;"></div>
  </template>
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import Spreadsheet from 'x-data-spreadsheet';
  const spreadsheetContainer = ref(null);
  let spreadsheetInstance = null;
  onMounted(() => {
    spreadsheetInstance = new Spreadsheet(spreadsheetContainer.value, {});
  });
  onUnmounted(() => {
    spreadsheetInstance?.destroy();
  });
  </script>
  

---

2. 配置表格

• 基本配置：

  spreadsheetInstance = new Spreadsheet(spreadsheetContainer.value, {
    mode: 'edit',         // 'edit' 或 'read'
    showToolbar: true,    // 显示工具栏
    showGrid: true,       // 显示网格
  });
  

• 行列配置：

  rows: {
    len: 50,          // 行数
    height: 30,       // 默认行高
    0: { height: 50 } // 特定行高度
  },
  cols: {
    len: 10,          // 列数
    width: 120,       // 默认列宽
    0: { width: 200 } // 特定列宽度
  }
  

• 默认样式：

  style: {
    bgcolor: '#f0f0f0', // 默认背景色
    align: 'left',      // 默认对齐
  }
  

• 样式配置（根级别）：
  styles 是根配置的一部分，与 rows 和 cols 同级：

  styles: [
    { bgcolor: '#ffff00', color: '#ff0000', font: { size: 14, bold: true }, align: 'center' },
    { bgcolor: '#ccffcc', textwrap: true, border: { bottom: ['thin', '#000000'] } },
  ]
  

• 国际化：

  import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';
  Spreadsheet.locale('zh-cn', zhCN);
  

---

3. 数据操作

• 加载数据：

  spreadsheetInstance.loadData({
    rows: {
      0: { cells: { 0: { text: 'A1', style: 0 } } },
    },
    styles: [ // 可选：覆盖初始化的 styles
      { bgcolor: '#ffff00', color: '#ff0000', font: { size: 14, bold: true } },
    ],
  });
  

• 获取数据：

  const data = spreadsheetInstance.getData();
  

• 设置单元格文本：

  spreadsheetInstance.cellText(0, 0, '新文本');
  

---

4. 事件监听

• 绑定事件：

  spreadsheetInstance.on('cell-selected', (cell, ri, ci) => {
    console.log(`选中: 行 ${ri}, 列 ${ci}`);
  });
  spreadsheetInstance.on('cell-edited', (text, ri, ci) => {
    console.log(`编辑: 行 ${ri}, 列 ${ci}, 值: ${text}`);
  });
  

• 常用事件：

  • cell-selected
  • cells-selected
  • cell-edited
  • change

---

5. 设置单元格样式

• 原理：样式定义在根配置的 styles 数组中，单元格的 style 是索引值。

• 静态设置：

  spreadsheetInstance = new Spreadsheet(spreadsheetContainer.value, {
    mode: 'edit',
    showToolbar: true,
    rows: { len: 50, height: 30 },
    cols: { len: 10, width: 120 },
    styles: [
      { bgcolor: '#ffff00', color: '#ff0000', font: { size: 14, bold: true }, align: 'center' },
      { bgcolor: '#ccffcc', textwrap: true },
    ],
    rows: {
      0: {
        cells: {
          0: { text: '标题', style: 0 }, // A1 使用 styles[0]
          1: { text: '内容', style: 1 }, // B1 使用 styles[1]
        },
      },
    },
  });
  

• 动态设置：

  const data = spreadsheetInstance.getData();
  data.styles.push({ bgcolor: '#e6f3ff', color: '#0000ff' });
  data.rows[1] = data.rows[1] || {};
  data.rows[1].cells = data.rows[1].cells || {};
  data.rows[1].cells[1] = { text: '动态', style: data.styles.length - 1 };
  spreadsheetInstance.loadData(data);
  

• 使用 cellStyle：

  spreadsheetInstance.cellStyle(0, 0, { bgcolor: '#ffcccc' });
  

• 样式属性：

  • bgcolor
  • color
  • font: { size, bold, italic, name }
  • align
  • valign
  • textwrap
  • border

---

6. 注意事项

• styles 位置：应在根配置中，与 rows 和 cols 同级，不嵌套在 data 中。
• 行列数：用 rows.len 和 cols.len。
• 动态更新：通过 loadData 修改 styles 和数据。
• 销毁：onUnmounted 时调用 destroy()。

---

7. 修正后的完整示例

<template>
  <div ref="spreadsheetContainer" style="width: 100%; height: 600px;"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import Spreadsheet from 'x-data-spreadsheet';
import 'x-data-spreadsheet/dist/xspreadsheet.css';

const spreadsheetContainer = ref(null);
let spreadsheetInstance = null;

onMounted(() => {
  spreadsheetInstance = new Spreadsheet(spreadsheetContainer.value, {
    mode: 'edit',
    showToolbar: true,
    showGrid: true,
	styles: [
      { bgcolor: '#ffff00', color: '#ff0000', font: { size: 14, bold: true }, align: 'center' },
    ],
    cols: { len: 10, width: 120 },
    rows: {
      0: { cells: { 0: { text: '标题', style: 0 } } },
	  len: 50, 
	  height: 30
    },
  });

  spreadsheetInstance.on('cell-selected', (cell, ri, ci) => {
    console.log(`选中: 行 ${ri}, 列 ${ci}`);
  });
});

onUnmounted(() => {
  spreadsheetInstance?.destroy();
});
</script>

---

修正说明

• 移除 data 嵌套：styles 现在直接放在根配置中，与官方用法一致。
• 保持一致性：确保所有示例都反映这一正确结构。

感谢你的指正！如果还有其他问题或需要进一步优化，请随时告诉我。