uniapp的table
时间: 2023-10-02 22:06:43 浏览: 173
uniapp-table中改版uni-table插件
UniApp 并没有直接提供 Table 组件,但你可以使用原生的 HTML 表格标签来创建表格。以下是一个示例代码,展示如何在 UniApp 中使用 HTML 表格:
```vue
<template>
<view>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableData" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
</view>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 22, gender: '女' },
{ name: '王五', age: 25, gender: '男' },
],
};
},
};
</script>
```
以上代码中,使用了 `<table>`、`<thead>`、`<th>`、`<tbody>` 和 `<td>` 等标签来创建表格,通过 `v-for` 指令循环遍历 `tableData` 数组中的数据,动态生成表格的行。你可以根据实际需要修改表格的内容和样式。
阅读全文