diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index d6eeac7a..f8d6ce13 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -111,14 +111,22 @@
行数:
setTableRow(e)"
+ @blur="e => setTableRow(e)"
style="flex: 3;"
/>
列数:
setTableCol(e)"
+ @blur="e => setTableCol(e)"
style="flex: 3;"
/>
@@ -182,8 +190,11 @@ import { useStore } from 'vuex'
import { MutationTypes, State } from '@/store'
import { PPTTableElement, TableCell, TableCellStyle, TableTheme } from '@/types/slides'
import emitter, { EmitterEvents } from '@/utils/emitter'
+import { createRandomCode } from '@/utils/common'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+import { message } from 'ant-design-vue'
+
import ElementOutline from '../common/ElementOutline.vue'
import ColorButton from '../common/ColorButton.vue'
@@ -213,6 +224,8 @@ export default defineComponent({
const hasTheme = ref(false)
const rowCount = ref(0)
const colCount = ref(0)
+ const minRowCount = ref(0)
+ const minColCount = ref(0)
watch(handleElement, () => {
if(!handleElement.value) return
@@ -222,6 +235,9 @@ export default defineComponent({
rowCount.value = handleElement.value.data.length
colCount.value = handleElement.value.data[0].length
+
+ minRowCount.value = handleElement.value.data.length
+ minColCount.value = handleElement.value.data[0].length
}, { deep: true, immediate: true })
const selectedCells = ref([])
@@ -327,7 +343,54 @@ export default defineComponent({
addHistorySnapshot()
}
+ const setTableRow = (e: KeyboardEvent) => {
+ const value = +(e.target as HTMLInputElement).value
+ const rowCount = handleElement.value.data.length
+
+ if(value <= rowCount) return message.warning('设置行数不能少于当前值')
+
+ const rowCells: TableCell[] = new Array(colCount.value).fill({ id: createRandomCode(), colspan: 1, rowspan: 1, text: '' })
+ const newTableCells: TableCell[][] = new Array(value - rowCount).fill(rowCells)
+
+ const tableCells: TableCell[][] = JSON.parse(JSON.stringify(handleElement.value.data))
+ tableCells.push(...newTableCells)
+
+ const props = { data: tableCells }
+ store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+ addHistorySnapshot()
+ }
+
+ const setTableCol = (e: KeyboardEvent) => {
+ const value = +(e.target as HTMLInputElement).value
+ const colCount = handleElement.value.data[0].length
+
+ if(value <= colCount) return message.warning('设置列数不能少于当前值')
+
+ const tableCells = handleElement.value.data.map(item => {
+ const cells: TableCell[] = new Array(value - colCount).fill({ id: createRandomCode(), colspan: 1, rowspan: 1, text: '' })
+ item.push(...cells)
+ return item
+ })
+
+ const colSizeList = handleElement.value.colWidths.map(item => item * handleElement.value.width)
+ const newColSizeList = new Array(value - colCount).fill(100)
+ colSizeList.push(...newColSizeList)
+
+ const width = handleElement.value.width + 100 * (value - colCount)
+ const colWidths = colSizeList.map(item => item / width)
+
+ const props = {
+ width,
+ data: tableCells,
+ colWidths,
+ }
+ store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+
+ addHistorySnapshot()
+ }
+
return {
+ handleElement,
availableFonts,
fontSizeOptions,
textAttrs,
@@ -335,9 +398,13 @@ export default defineComponent({
theme,
rowCount,
colCount,
+ minRowCount,
+ minColCount,
hasTheme,
toggleTheme,
updateTheme,
+ setTableRow,
+ setTableCol,
}
},
})