当前位置：首页 > uni-app

uniapp实现表格

2026-03-04 22:21:02uni-app

uniapp实现表格的方法

使用`<table>`标签

在uniapp中可以直接使用HTML的<table>标签实现基础表格。注意样式需通过内联或全局CSS调整，因部分小程序平台对HTML标签支持有限。

<view class="table-container">
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
  </table>
</view>

.table-container table {
  width: 100%;
  border-collapse: collapse;
}
.table-container th, .table-container td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

使用`<uni-table>`组件（H5端）

H5端可使用官方扩展组件uni-table，需先安装@dcloudio/uni-ui：

uniapp实现表格

npm install @dcloudio/uni-ui

<template>
  <uni-table>
    <uni-tr>
      <uni-th>姓名</uni-th>
      <uni-th>年龄</uni-th>
    </uni-tr>
    <uni-tr>
      <uni-td>李四</uni-td>
      <uni-td>28</uni-td>
    </uni-tr>
  </uni-table>
</template>
<script>
  import { UniTable, UniTr, UniTh, UniTd } from '@dcloudio/uni-ui'
  export default {
    components: { UniTable, UniTr, UniTh, UniTd }
  }
</script>

使用`<view>`模拟表格

跨平台兼容性更好的方案是用flex布局模拟表格：

uniapp实现表格

<view class="table">
  <view class="row header">
    <view class="cell">ID</view>
    <view class="cell">名称</view>
  </view>
  <view class="row" v-for="item in list" :key="item.id">
    <view class="cell">{{ item.id }}</view>
    <view class="cell">{{ item.name }}</view>
  </view>
</view>

.table {
  width: 100%;
}
.row {
  display: flex;
  border-bottom: 1px solid #eee;
}
.header {
  font-weight: bold;
  background-color: #f5f5f5;
}
.cell {
  flex: 1;
  padding: 10px;
  text-align: center;
}

动态数据绑定

结合Vue的数据绑定实现动态表格：

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '商品A', price: 99 },
        { id: 2, name: '商品B', price: 199 }
      ]
    }
  }
}

<view class="table">
  <view class="row header">
    <view class="cell">ID</view>
    <view class="cell">名称</view>
    <view class="cell">价格</view>
  </view>
  <view class="row" v-for="item in tableData" :key="item.id">
    <view class="cell">{{ item.id }}</view>
    <view class="cell">{{ item.name }}</view>
    <view class="cell">¥{{ item.price }}</view>
  </view>
</view>

第三方组件库

可选用第三方UI库如uView的表格组件：

<u-table :columns="columns" :list="dataList"></u-table>

export default {
  data() {
    return {
      columns: [
        { title: '姓名', key: 'name' },
        { title: '分数', key: 'score' }
      ],
      dataList: [
        { name: '王五', score: 90 },
        { name: '赵六', score: 85 }
      ]
    }
  }
}