uni-table使用
时间: 2023-06-13 15:04:25 浏览: 199
uni-table 是基于 Element UI 封装的一款表格组件,用于在 uni-app 中快速构建表格页面。以下是使用 uni-table 的步骤:
1. 安装 uni-table:在 uni-app 项目根目录下执行命令 `npm i uni-table --save`。
2. 在需要使用表格的页面中引入 uni-table 组件: `import uniTable from 'uni-table'`。
3. 在 template 中使用 uni-table 组件,指定 columns 和 data 属性。columns 是表格的列信息,data 是表格的数据。
示例代码:
```html
<template>
<view>
<uni-table :columns="columns" :data="tableData"></uni-table>
</view>
</template>
<script>
import uniTable from 'uni-table';
export default {
components: {
uniTable
},
data() {
return {
columns: [{
label: '姓名',
prop: 'name'
}, {
label: '年龄',
prop: 'age'
}, {
label: '性别',
prop: 'gender'
}],
tableData: [{
name: '张三',
age: 18,
gender: '男'
}, {
name: '李四',
age: 20,
gender: '女'
}]
}
}
}
</script>
```
以上就是 uni-table 的基本使用方法,你可以根据自己的实际需求来配置表格的列和数据。