vue指定uni-table行数,未填满用横杠代替,行多隐藏
时间: 2024-03-05 19:47:59 浏览: 65
uniapp-table中改版uni-table插件
您可以使用uni-table组件的属性来指定表格的行数和列数。如果您想要指定表格的行数,可以使用 `rows` 属性。例如,如果您想要表格只显示 5 行,但是数据不足 5 行时,可以使用以下代码:
```
<uni-table :data="tableData" :rows="5">
<uni-table-column prop="name" label="Name"></uni-table-column>
<uni-table-column prop="age" label="Age"></uni-table-column>
<uni-table-column prop="address" label="Address"></uni-table-column>
</uni-table>
```
如果您想要未填满的行使用横杠代替,可以使用 `show-overflow-tooltip` 属性。例如:
```
<uni-table :data="tableData" :rows="5" show-overflow-tooltip>
<uni-table-column prop="name" label="Name"></uni-table-column>
<uni-table-column prop="age" label="Age"></uni-table-column>
<uni-table-column prop="address" label="Address"></uni-table-column>
</uni-table>
```
如果您想要多余的行被隐藏,可以使用 `max-height` 属性。例如:
```
<uni-table :data="tableData" :rows="5" show-overflow-tooltip max-height="100px">
<uni-table-column prop="name" label="Name"></uni-table-column>
<uni-table-column prop="age" label="Age"></uni-table-column>
<uni-table-column prop="address" label="Address"></uni-table-column>
</uni-table>
```
这将使表格最多显示 5 行,并且超出的行将被隐藏。
阅读全文