<uni-table border stripe emptyText="暂无更多数据"> <!-- 表头行 --> <uni-tr > <uni-th algin="center" style=" width: 3%; background-color: #394958; color:white; font-size: medium;">区域</uni-th> <uni-th align="center" style=" width: 10%; background-color: #394958; color:white; font-size: medium;">设备名称</uni-th> <uni-th align="center" style=" width: 10%; background-color: #394958; color:white; font-size: medium;">系统</uni-th> <uni-th align="center" style=" width: 3%; background-color: #394958; color:white; font-size: medium;">检查点</uni-th> </uni-tr> <!-- 表格数据行 --> <uni-tr> <uni-td algin="center">{{options.shop}}</uni-td> <uni-td algin="center">{{options.equipmentName}}</uni-td> <uni-td algin="center">{{this.values.system}}</uni-td> <uni-td algin="center">{{this.values.checkPoints}}</uni-td> </uni-tr> </uni-table>如何让数据横着展示
时间: 2023-08-13 21:12:53 浏览: 61
你可以使用uni-table的slot来自定义表格的展示方式。具体实现方法如下:
1. 使用uni-table的slot属性,创建一个新的template,例如:
```
<uni-table border stripe emptyText="暂无更多数据">
<!-- 表头行 -->
<uni-tr>
<uni-th align="center" style=" width: 3%; background-color: #394958; color:white; font-size: medium;">区域</uni-th>
<uni-th align="center" style=" width: 10%; background-color: #394958; color:white; font-size: medium;">设备名称</uni-th>
<uni-th align="center" style=" width: 10%; background-color: #394958; color:white; font-size: medium;">系统</uni-th>
<uni-th align="center" style=" width: 3%; background-color: #394958; color:white; font-size: medium;">检查点</uni-th>
</uni-tr>
<!-- 自定义数据展示方式 -->
<template slot="default">
<uni-tr>
<uni-td algin="center">{{options.shop}}</uni-td>
<uni-td algin="center">{{options.equipmentName}}</uni-td>
<uni-td algin="center">{{this.values.system}}</uni-td>
<uni-td algin="center">{{this.values.checkPoints}}</uni-td>
</uni-tr>
</template>
</uni-table>
```
2. 在自定义数据展示方式的template中,将原本的表格数据行uni-tr替换为uni-td,并将数据横向展示,例如:
```
<!-- 自定义数据展示方式 -->
<template slot="default">
<uni-tr>
<uni-td algin="center">区域</uni-td>
<uni-td algin="center">{{options.shop}}</uni-td>
</uni-tr>
<uni-tr>
<uni-td algin="center">设备名称</uni-td>
<uni-td algin="center">{{options.equipmentName}}</uni-td>
</uni-tr>
<uni-tr>
<uni-td algin="center">系统</uni-td>
<uni-td algin="center">{{this.values.system}}</uni-td>
</uni-tr>
<uni-tr>
<uni-td algin="center">检查点</uni-td>
<uni-td algin="center">{{this.values.checkPoints}}</uni-td>
</uni-tr>
</template>
```
这样,就可以将数据横向展示了。