我只需要在表格外添加序号就行,不用新增表格
时间: 2024-03-02 13:52:28 浏览: 40
好的,你可以在表格外面添加一个容器,并在容器内部生成序号。代码如下:
```
<div class="table-container">
<table>
<tr>
<th></th>
<th v-for="j in 14" class="key">{{ j }}</th>
</tr>
<tr v-for="i in 14">
<th class="key">{{ i }}</th>
<td v-for="j in 14"
@mouseMove="onMouseMove(i - 1, j - 1, $event)"
@click="onCellClicked(i - 1, j - 1, $event)">
</td>
</tr>
</table>
<div class="row-index-container">
<div v-for="i in 14" class="row-index">{{ i }}</div>
</div>
<div class="column-index-container">
<div v-for="j in 14" class="column-index">{{ j }}</div>
</div>
</div>
```
在表格外面添加了一个容器,类名为 `table-container`。在容器内部,先放置表格代码,然后分别添加左侧和下方的序号容器。左侧的序号容器类名为 `row-index-container`,内部使用 `v-for` 循环生成 1~14 的数字,并且添加了类名为 `row-index` 的样式。下方的序号容器类名为 `column-index-container`,内部同样使用 `v-for` 循环生成 1~14 的数字,并且添加了类名为 `column-index` 的样式。
接下来,需要在 CSS 文件中定义 `.row-index` 和 `.column-index` 两个类的样式。例如:
```
.row-index-container {
position: absolute;
top: 32px;
left: 0;
width: 30px;
height: calc(100% - 32px);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.row-index {
width: 100%;
text-align: center;
font-weight: bold;
}
.column-index-container {
position: absolute;
top: 0;
left: 32px;
width: calc(100% - 32px);
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.column-index {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
```
这里定义了 `.row-index-container` 和 `.column-index-container` 两个类的样式,以及它们内部的 `.row-index` 和 `.column-index` 两个类的样式。具体样式细节可以根据需要进行调整。这样设置后,左侧和下方的序号就可以显示在表格外部了。