vue实现T型二维表格
- 图片
-
实现T形2维表，上下滚动，T形左右可以各自水平滚动
-
底部和顶部水平滚动保持一致
-
实现excle复制粘贴
-
T形左右宽度各自撑开
-
代码如下
{{ item }}
{{ middleAxisText }}
{{ item }}
<div class="content-left-scroll"
ref="contentLeftScroll"
:style="leftAreaStyle"
@paste="(e) => handleTablePaste('left',e)"
@scroll="syncLeftHorizontalScroll">
<td v-for="(val, colIdx) in row.left"
:style="leftCellStyle"
@click.stop="setActiveCell(rowIdx, colIdx, 'left')"
:key="'l-' + rowIdx + '-' + colIdx">
<input type="text"
@click.stop="setActiveCell(rowIdx, colIdx, 'left')"
v-model="tableData[rowIdx].left[colIdx]"
class="content-input" />
{{ row.middle }}
<div class="content-right-scroll"
ref="contentRightScroll"
:style="rightAreaStyle"
@paste="(e) => handleTablePaste('right',e)"
@scroll="syncRightHorizontalScroll">
<td v-for="(val, colIdx) in row.right"
:style="rightCellStyle"
@click="setActiveCell(rowIdx, colIdx, 'right')"
:key="'r-' + rowIdx + '-' + colIdx">
<input type="text"
@click.stop="setActiveCell(rowIdx, colIdx, 'right')"
v-model="tableData[rowIdx].right[colIdx]"
class="content-input" />
浙公网安备 33010602011771号