github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 调整优化表格行列数设置

Browse Source
This commit is contained in:
pipipi-pikachu 2021-12-31 16:40:31 +08:00
parent f704f4ad70
commit cb9ae878ad
1 changed files with 59 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
View File

@ -117,23 +117,19 @@
<div class="row"> <div class="row">
<div style="flex: 2;">行数：</div> <div style="flex: 2;">行数：</div>
<InputNumber <div class="set-count" style="flex: 3;">
:min="minRowCount" <Button class="btn" :disabled="rowCount <= 1" @click="setTableRow(rowCount - 1)"><IconMinus /></Button>
:max="20" <div class="count-text">{{rowCount}}</div>
v-model:value="rowCount" <Button class="btn" :disabled="rowCount >= 30" @click="setTableRow(rowCount + 1)"><IconPlus /></Button>
@pressEnter="e => setTableRow(e)" </div>
style="flex: 3;"
/>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 2;">列数：</div> <div style="flex: 2;">列数：</div>
<InputNumber <div class="set-count" style="flex: 3;">
:min="minColCount" <Button class="btn" :disabled="colCount <= 1" @click="setTableCol(colCount - 1)"><IconMinus /></Button>
:max="20" <div class="count-text">{{colCount}}</div>
v-model:value="colCount" <Button class="btn" :disabled="colCount >= 30" @click="setTableCol(colCount + 1)"><IconPlus /></Button>
@pressEnter="e => setTableCol(e)" </div>
style="flex: 3;"
/>
</div> </div>
<Divider /> <Divider />
@ -351,47 +347,50 @@ export default defineComponent({
} }
} }
// 设置表格行数（只能增加） // 设置表格行数
const setTableRow = (e: KeyboardEvent) => { const setTableRow = (value: number) => {
const _handleElement = handleElement.value as PPTTableElement const _handleElement = handleElement.value as PPTTableElement
const value = +(e.target as HTMLInputElement).value
const rowCount = _handleElement.data.length const rowCount = _handleElement.data.length
if (value === rowCount) return if (value > rowCount) {
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 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.data))
tableCells.push(...newTableCells)
const tableCells: TableCell[][] = JSON.parse(JSON.stringify(_handleElement.data))
tableCells.push(...newTableCells) updateElement({ data: tableCells })
}
updateElement({ data: tableCells }) else {
const tableCells: TableCell[][] = _handleElement.data.slice(0, value)
updateElement({ data: tableCells })
}
} }
// 设置表格列数
// 设置表格列数（只能增加） const setTableCol = (value: number) => {
const setTableCol = (e: KeyboardEvent) => {
const _handleElement = handleElement.value as PPTTableElement const _handleElement = handleElement.value as PPTTableElement
const value = +(e.target as HTMLInputElement).value
const colCount = _handleElement.data[0].length const colCount = _handleElement.data[0].length
if (value === colCount) return let tableCells = _handleElement.data
if (value < colCount) return message.warning('设置列数不能少于当前值') let colSizeList = _handleElement.colWidths.map(item => item * _handleElement.width)
const tableCells = _handleElement.data.map(item => { if (value > colCount) {
const cells: TableCell[] = new Array(value - colCount).fill({ id: createRandomCode(), colspan: 1, rowspan: 1, text: '' }) tableCells = tableCells.map(item => {
item.push(...cells) const cells: TableCell[] = new Array(value - colCount).fill({ id: createRandomCode(), colspan: 1, rowspan: 1, text: '' })
return item item.push(...cells)
}) return item
})
const newColSizeList: number[] = new Array(value - colCount).fill(100)
colSizeList.push(...newColSizeList)
}
else {
tableCells = tableCells.map(item => item.slice(0, value))
colSizeList = colSizeList.slice(0, value)
}
const colSizeList = _handleElement.colWidths.map(item => item * _handleElement.width) const width = colSizeList.reduce((a, b) => a + b)
const newColSizeList = new Array(value - colCount).fill(100)
colSizeList.push(...newColSizeList)
const width = _handleElement.width + 100 * (value - colCount)
const colWidths = colSizeList.map(item => item / width) const colWidths = colSizeList.map(item => item / width)
const props = { const props = {
@ -448,4 +447,19 @@ export default defineComponent({
height: 3px; height: 3px;
margin-top: 1px; margin-top: 1px;
} }
.set-count {
display: flex;
justify-content: center;
align-items: center;
.btn {
padding: 4px 8px;
}
.count-text {
flex: 1;
text-align: center;
margin: 0 8px;
}
}
</style> </style>