使用vue3写法,做出一个表头为纵向垂直方向的element-table表格,垂直表头分别为名称、服务器IP、ID、设备类型、设备品牌、网络状态。内容分别为摄像头西北角、172.54.369.5、238546184、网络摄像头、哈卡、好。
时间: 2023-12-28 07:22:23 浏览: 193
vue3 el-table多级表头收缩扩展的实现(JS原味版)
在Vue3中,可以使用`<template>`标签中的`<tr>`和`<th>`标签来实现纵向垂直方向的表头,同时使用`<td>`标签来填充表格内容。具体实现代码如下:
```
<template>
<div>
<table>
<thead>
<tr>
<th>名称</th>
<th>服务器IP</th>
<th>ID</th>
<th>设备类型</th>
<th>设备品牌</th>
<th>网络状态</th>
</tr>
</thead>
<tbody>
<tr>
<th>摄像头西北角</th>
<td>172.54.369.5</td>
<td>238546184</td>
<td>网络摄像头</td>
<td>哈卡</td>
<td>好</td>
</tr>
</tbody>
</table>
</div>
</template>
```
其中,`<th>`标签用于表头,`<td>`标签用于表格内容。`<thead>`标签用于表头部分,`<tbody>`标签用于表格内容部分。
阅读全文