uniapp table组件如何使用

在uniapp中如何使用table组件？官方文档里没有找到明确的使用示例，想实现一个带排序和分页功能的表格，但不知道该如何引入和配置。求具体代码示例或推荐好用的第三方table组件库。

2 回复

uniapp中可使用<table>标签创建表格，搭配<tr>、<td>等标签。示例：

<table>
  <tr><td>姓名</td><td>年龄</td></tr>
  <tr><td>张三</td><td>25</td></tr>
</table>

注意：uniapp的table功能较基础，复杂表格建议用<view>模拟或使用第三方组件库。


在 UniApp 中，没有内置的 table 组件，但可以通过以下方式实现表格功能：

1. 使用 view 和 CSS 布局

通过 view 元素和 Flex 布局或 Grid 布局模拟表格结构。

示例代码：

<template>
  <view class="table">
    <!-- 表头 -->
    <view class="tr header">
      <view class="th">姓名</view>
      <view class="th">年龄</view>
      <view class="th">城市</view>
    </view>
    <!-- 表格数据 -->
    <view class="tr" v-for="(item, index) in tableData" :key="index">
      <view class="td">{{ item.name }}</view>
      <view class="td">{{ item.age }}</view>
      <view class="td">{{ item.city }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' }
      ]
    }
  }
}
</script>

<style scoped>
.table {
  width: 100%;
  border: 1px solid #ddd;
}
.tr {
  display: flex;
}
.th, .td {
  flex: 1;
  padding: 8px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}
.header {
  background-color: #f5f5f5;
  font-weight: bold;
}
</style>

2. 使用第三方组件库

  • uView UI：提供 u-table 组件，支持丰富的表格功能。
  • First UI：包含表格组件，简化开发。

安装 uView UI（如使用）：

npm install uview-ui

在 main.js 中引入：

import uView from 'uview-ui'
Vue.use(uView)

使用 u-table 示例：

<u-table>
  <u-tr>
    <u-th>姓名</u-th>
    <u-th>年龄</u-th>
  </u-tr>
  <u-tr v-for="item in list" :key="item.id">
    <u-td>{{ item.name }}</u-td>
    <u-td>{{ item.age }}</u-td>
  </u-tr>
</u-table>

注意事项：

  • 自定义表格时，注意样式兼容不同平台（如 H5、小程序）。
  • 第三方组件需按文档正确引入和配置。

根据需求选择合适的方式，简单表格可用自定义布局，复杂功能建议用组件库。

回到顶部