feat：监听单元格数据

src/components/ExcelTable.vue

 <template>
 
   <button id="toggleButton" @click="changeMode"> {{ buttonMsg }}</button>
+  <button id="exportData" @click="exportData"> export data </button>
   <div id="tableDiv"></div>
 
 </template>
@@ -22,8 +23,26 @@ const changeMode = () => {
   }
 }
 
+const exportData = () => {
+  if (isEditable) {
+    alert('请切换至预览模式后再导出数据');
+    return;
+  }
+}
+
+const cellChanged = (cell: HTMLTableCellElement) => {
+  console.log("单元格内容发生改变：" + cell.textContent);
+  console.log("所在行：" + (cell.parentElement as HTMLTableRowElement).rowIndex);
+  console.log("所在列：" + cell.cellIndex);
+  let row = (cell.parentElement as HTMLTableRowElement).rowIndex;
+  let col = cell.cellIndex;
+  tableData[row][col].value = cell.textContent || "";
+  console.log(tableData);
+}
+
 // 生成表格
 onMounted(() => {
+  console.log(tableData)
   // 读取数据
   let tableDiv = document.getElementById('tableDiv')!
   let table = document.createElement('table')
@@ -33,7 +52,7 @@ onMounted(() => {
   for (let i = 0; i < tableData.length; i++) {
     let tr = document.createElement('tr')
 
-    for(let j = 0; j < tableData[i].length; j ++) {
+    for (let j = 0; j < tableData[i].length; j++) {
       if (tableData[i][j].value === undefined) continue;
 
       let td = null;
@@ -43,14 +62,14 @@ onMounted(() => {
         td = document.createElement('td')
       }
       td.textContent = String(tableData[i][j].value)
-
+      td.oninput = () => cellChanged(td)
       // 处理合并单元格问题
       td.rowSpan = tableData[i][j].rowSpan
       td.colSpan = tableData[i][j].colSpan
 
       tr.appendChild(td)
     }
-    
+
     table.appendChild(tr)
   }
   tableDiv.appendChild(table)
@@ -66,7 +85,7 @@ onMounted(() => {
 }
 
 :deep(th,
-td) {
+  td) {
   border: 1px solid #ddd;
   padding: 8px;
   text-align: center;