表格相关代码优化

src/utils/emitter.ts

@@ -4,7 +4,6 @@ export enum EmitterEvents {
   UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE',
   EXEC_TEXT_COMMAND = 'EXEC_TEXT_COMMAND',
   UPDATE_TABLE_SELECTED_CELL = 'UPDATE_TABLE_SELECTED_CELL',
-  EXEC_TABLE_COMMAND = 'EXEC_TABLE_COMMAND',
   SCALE_ELEMENT_STATE = 'SCALE_ELEMENT_STATE',
 }
 

src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue

@@ -109,24 +109,18 @@
     <Divider />
 
     <div class="row">
-      <Button style="flex: 5;">上方插入行</Button>
+      <div style="flex: 2;">行数：</div>
-      <div style="flex: 1;"></div>
+      <InputNumber 
-      <Button style="flex: 5;">下方插入行</Button>
+        :value="rowCount" 
+        style="flex: 3;" 
+      />
     </div>
     <div class="row">
-      <Button style="flex: 5;">左侧插入列</Button>
+      <div style="flex: 2;">列数：</div>
-      <div style="flex: 1;"></div>
+      <InputNumber 
-      <Button style="flex: 5;">右侧插入列</Button>
+        :value="colCount" 
-    </div>
+        style="flex: 3;" 
-    <div class="row">
+      />
-      <Button style="flex: 5;">删除行</Button>
-      <div style="flex: 1;"></div>
-      <Button style="flex: 5;">删除列</Button>
-    </div>
-    <div class="row">
-      <Button style="flex: 5;">合并单元格</Button>
-      <div style="flex: 1;"></div>
-      <Button style="flex: 5;">拆分单元格</Button>
     </div>
 
     <Divider />
@@ -217,12 +211,17 @@ export default defineComponent({
 
     const theme = ref<TableTheme>()
     const hasTheme = ref(false)
+    const rowCount = ref(0)
+    const colCount = ref(0)
 
     watch(handleElement, () => {
       if(!handleElement.value) return
       
       theme.value = handleElement.value.theme
       hasTheme.value = !!theme.value
+
+      rowCount.value = handleElement.value.data.length
+      colCount.value = handleElement.value.data[0].length
     }, { deep: true, immediate: true })
 
     const selectedCells = ref<string[]>([])
@@ -334,6 +333,8 @@ export default defineComponent({
       textAttrs,
       updateTextAttrs,
       theme,
+      rowCount,
+      colCount,
       hasTheme,
       toggleTheme,
       updateTheme,

src/views/components/element/TableElement/EditableTable.vue

@@ -522,6 +522,24 @@ export default defineComponent({
       return effectiveTableCells
     }
 
+    const checkCanDeleteRowOrCol = () => {
+      const effectiveTableCells = getEffectiveTableCells()
+      const canDeleteRow = effectiveTableCells.length > 1
+      const canDeleteCol = effectiveTableCells[0].length > 1
+
+      return { canDeleteRow, canDeleteCol }
+    }
+
+    const checkCanMergeOrSplit = (rowIndex: number, colIndex: number) => {
+      const isMultiSelected = selectedCells.value.length > 1
+      const targetCell = tableCells.value[rowIndex][colIndex]
+
+      const canMerge = isMultiSelected
+      const canSplit = !isMultiSelected && (targetCell.rowspan > 1 || targetCell.colspan > 1)
+
+      return { canMerge, canSplit }
+    }
+
     const contextmenus = (el: HTMLElement): ContextmenuItem[] => {
       const cellIndex = el.dataset.cellIndex as string
       const rowIndex = +cellIndex.split('_')[0]
@@ -532,14 +550,8 @@ export default defineComponent({
         endCell.value = []
       }
 
-      const isMultiSelected = selectedCells.value.length > 1
+      const { canMerge, canSplit } = checkCanMergeOrSplit(rowIndex, colIndex)
-
+      const { canDeleteRow, canDeleteCol } = checkCanDeleteRowOrCol()
-      const targetCell = tableCells.value[rowIndex][colIndex]
-      const canSplit = targetCell.rowspan > 1 || targetCell.colspan > 1
-
-      const effectiveTableCells = getEffectiveTableCells()
-      const canDeleteRow = effectiveTableCells.length > 1
-      const canDeleteCol = effectiveTableCells[0].length > 1
 
       return [
         {
@@ -569,12 +581,12 @@ export default defineComponent({
         { divider: true },
         {
           text: '合并单元格',
-          disable: !isMultiSelected,
+          disable: !canMerge,
           handler: mergeCells,
         },
         {
           text: '取消合并单元格',
-          disable: isMultiSelected || !canSplit,
+          disable: !canSplit,
           handler: () => splitCells(rowIndex, colIndex),
         },
         { divider: true },