diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts index d12dbb2..2ff0c60 100644 --- a/src/utils/emitter.ts +++ b/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', } diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue index 1e6f0f8..d6eeac7 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue @@ -109,24 +109,18 @@
- -
- +
行数:
+
- -
- -
-
- -
- -
-
- -
- +
列数:
+
@@ -217,12 +211,17 @@ export default defineComponent({ const theme = ref() 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([]) @@ -334,6 +333,8 @@ export default defineComponent({ textAttrs, updateTextAttrs, theme, + rowCount, + colCount, hasTheme, toggleTheme, updateTheme, diff --git a/src/views/components/element/TableElement/EditableTable.vue b/src/views/components/element/TableElement/EditableTable.vue index 99a6caf..edc72d6 100644 --- a/src/views/components/element/TableElement/EditableTable.vue +++ b/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 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 + const { canMerge, canSplit } = checkCanMergeOrSplit(rowIndex, colIndex) + const { canDeleteRow, canDeleteCol } = checkCanDeleteRowOrCol() 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 },