完善T型二维表
- 示例图
- 实现跟excle一样复制粘贴功能
- 拖动选中单元格实现按delete和backspace后删除单元格
- 键盘箭头上、下、左、右、回车单元格会往上、下、左、右、下一格
-
二维表组件代码
<div class="fixed-table-container"
:data-instance-id="instanceId"
@mousedown="handleContainerMousedown"
ref="tableContainer">
{{ item }}
{{ middleAxisText }}
{{ item }}
<div class="vertical-scroll-container"
ref="verticalScrollContainer"
@mouseup="handleContainerMouseup"
@mousemove="handleContainerMousemove"
@keydown="handleContainerKeydown"
v-if="tableData.length > 0 || rightTable.length > 0">
<div class="content-left-scroll"
v-if="tableData.length > 0"
ref="contentLeftScroll"
:style="leftAreaStyle"
@paste="(e) => handleTablePaste('left',e)"
@scroll="syncLeftHorizontalScroll">
<td v-for="(val, colIdx) in row"
:key="'l-cell-' + rowIdx + '-' + colIdx"
@click="setActiveCell(rowIdx, colIdx, 'left')"
:class="{'cell-selected': isCellSelected(rowIdx, colIdx, 'left')}"
:style="leftCellStyle">
<input type="number"
v-limit-decimal
:disabled="!val.bUpdate"
@click.stop="setActiveCell(rowIdx, colIdx, 'left')"
@change="onChangeLeft(val.value,rowIdx,colIdx)"
@input="onLeftValue(colIdx)"
v-model="val.value"
class="content-input"
:data-instance-id="instanceId"
:data-row="rowIdx"
@keydown="handleKeydown($event, rowIdx, colIdx, 'left')"
:data-col="colIdx" />
{{ row }}
<div class="content-right-scroll"
ref="contentRightScroll"
v-if="rightTable.length > 0"
:style="rightAreaStyle"
@paste="(e) => handleTablePaste('right',e)"
@scroll="syncRightHorizontalScroll">
<td v-for="(val, colIdx) in row"
@click="setActiveCell(rowIdx, colIdx, 'right')"
:key="'r-cell-' + rowIdx + '-' + colIdx"
:class="{'cell-selected': isCellSelected(rowIdx, colIdx, 'right')}"
:style="rightCellStyle">
<input type="number"
v-limit-decimal
@click.stop="setActiveCell(rowIdx, colIdx, 'right')"
@change="onValueRight(val.value,rowIdx,colIdx)"
@input="onRightValue(colIdx)"
:disabled="!val.bUpdate"
v-model="val.value"
class="content-input"
:data-instance-id="instanceId"
:data-row="rowIdx"
@keydown="handleKeydown($event, rowIdx, colIdx, 'right')"
:data-col="colIdx" />
浙公网安备 33010602011771号