uniapp table
时间: 2023-07-31 21:11:21 浏览: 132
uniapp-table中改版uni-table插件
Uniapp中没有原生的表格(table)组件。但是你可以使用第三方表格组件,比如 u-table,Mint UI 的 Table 组件等。
u-table 是一个基于 uView UI 的表格组件,使用起来非常方便。使用方法如下:
1. 安装 uView UI
```bash
npm install uview-ui
```
2. 在 main.js 中引入 uView UI
```javascript
import Vue from 'vue';
import uView from 'uview-ui';
Vue.use(uView);
```
3. 在需要使用表格的页面中引入 u-table
```vue
<template>
<u-table :list="tableData" :thead="tableThead" :cell-style="cellStyle"></u-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
],
tableThead: [
{ title: '姓名', key: 'name' },
{ title: '年龄', key: 'age' },
{ title: '性别', key: 'gender' }
]
};
},
methods: {
cellStyle(row, column) {
return { textAlign: 'center' };
}
}
};
</script>
```
这里的 tableData 是表格的数据源,tableThead 表示表头,cellStyle 表示单元格样式。
以上只是简单示例,具体使用方法可以查看 u-table 的官方文档。
阅读全文