扩展组件（uni-ui）之uni-table

uni-table 是 uni-app 的 uni-ui 组件库中的一个组件，用于展示表格数据。这个组件适合用于显示行列数据，如统计信息、订单列表、用户信息等。

基本用法

在使用 uni-table 之前，你需要确保已经正确安装了 uni-ui 库，并在页面中引入了 uni-table 组件及其相关子组件。

引入组件

<template>
    <uni-table :data="tableData" :column="columnData"></uni-table>
</template>

<script>
    import uniTable from '@dcloudio/uni-ui/lib/uni-table/uni-table.vue'
    import uniTableColumn from '@dcloudio/uni-ui/lib/uni-table-column/uni-table-column.vue'
    export default {
        components: { uniTable, uniTableColumn },
        data() {
            return {
                tableData: [
                    { name: '张三', age: 28, address: '上海市普陀区金沙江路 1518 弄' },
                    // 更多数据...
                ],
                columnData: [
                    { title: '姓名', key: 'name' },
                    { title: '年龄', key: 'age' },
                    { title: '地址', key: 'address' }
                ]
            }
        }
    }
</script>

属性

• data：表格数据数组，每个元素是一个对象，代表一行数据。
• column：列的配置数组，每个元素是一个对象，包括 title（列标题）和 key（数据字段名）。

示例

在此示例中，uni-table 创建了一个简单的表格，包含姓名、年龄和地址三列：

<uni-table :data="tableData" :column="columnData"></uni-table>

注意事项

• uni-table 组件提供基本的表格功能，适用于简单的数据展示场景。
• 通过 data 属性传入表格数据，column 属性定义表格的列。
• 可以根据实际需求调整样式和结构，以适应不同的应用场景。

更多关于 uni-table 组件的使用细节，可以查阅 uni-ui 官方文档 或 uni-ui 库的相关文档。这个也是最后一个uniapp扩展组件的介绍了! 更多扩展组件请查看[[uni-app官网 (dcloud.net.cn)]扩展组件(uniapp.dcloud.net.cn/component/u…)]