首页uniapp表格静态

uniapp表格静态

时间: 2025-01-29 14:43:17 浏览: 40

### 创建静态表格在 UniApp 中创建静态表格可以通过 HTML 表格标签 `<table>` 来实现。下面是一个简单的例子来展示如何构建一个基本的静态表格。 ```html <template> <view class="container">  <table border="1" width="100%"> <thead> <tr> <th>编号</th> <th>名称</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>苹果</td> <td>红色水果</td> </tr> <tr> <td>2</td> <td>香蕉</td> <td>黄色水果</td> </tr> <tr> <td>3</td> <td>橙子</td> <td>橙色水果</td> </tr> </tbody> </table> </view> </template> <script> export default { name: "StaticTable", }; </script> <style scoped> .container { padding: 20px; } table, th, td { border-collapse: collapse; /* 合并边框 */ } th, td { text-align: center; padding: 8px; } </style> ``` 此代码片段展示了如何利用标准HTML结构以及CSS样式化技巧，在UniApp项目里呈现一张带有表头和三行数据记录的简单表格[^1]。对于更复杂的应用场景，如果需要动态加载或更新表格内容，则可以考虑采用`v-for`指令配合JavaScript数组处理方法来生成表格行元素[^2]。

阅读全文