uniapp table怎么写
时间: 2023-12-26 14:06:37 浏览: 155
uni-app table表格
5星 · 资源好评率100%
UniApp 中可以使用 `uni-table` 组件来展示表格数据,具体使用方法如下:
1. 在需要使用表格的页面或组件中引入 `uni-table` 组件:
```html
<template>
<view>
<uni-table :columns="columns" :data="data"></uni-table>
</view>
</template>
<script>
import uniTable from '@/components/uni-table/uni-table.vue';
export default {
components: {
uniTable,
},
data() {
return {
columns: [], // 表格列定义
data: [], // 表格数据
};
},
};
</script>
```
2. 定义表格列
```js
columns: [
{
title: '姓名',
key: 'name',
width: '200rpx',
},
{
title: '年龄',
key: 'age',
width: '200rpx',
},
{
title: '性别',
key: 'gender',
width: '200rpx',
},
],
```
3. 定义表格数据
```js
data: [
{
name: '张三',
age: 25,
gender: '男',
},
{
name: '李四',
age: 30,
gender: '女',
},
{
name: '王五',
age: 28,
gender: '男',
},
],
```
以上就是使用 `uni-table` 组件展示表格数据的基本方法。如果需要更多高级功能,可以查看官方文档:[uni-table 表格](https://uniapp.dcloud.io/component/uni-table)。
阅读全文