HarmonyOS鸿蒙Next中有table表格控件吗？

HarmonyOS鸿蒙Next中有table表格控件吗？

【设备信息】 Mate60pro
【API版本】 Api14
【DevEco Studio版本】 5.0.2 Release
【问题描述】 当有大量结构化的数据需要展现时，需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。需要展示展示行列数据。具体展示效果如下链接参考：
https://ng.ant.design/components/table/zh

3 回复

目前没有表格组件，暂时只能使用web组件引入一个本地的html，在html中绘制一个表格。

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct TableHtml {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button("点击此处，加载HTML富文本").onClick(() => {
        this.controller.loadData(`<!DOCTYPE html>
<html>
<head>
<style>
.table-font-size{ font-size:20px; }
</style>
</head>
<body bgcolor="white">
<table width="1000" border="5" height="1000">
<tr class="table-font-size">
<th>Month</th>
<th>Month</th>
</tr>
<tr class="table-font-size">
<th>Month</th>
<th>Month</th>
</tr>
<tr class="table-font-size">
<th>Month</th>
<th>Month</th>
</tr>
<tr class="table-font-size">
<th>Month</th>
<th>Month</th>
</tr>
</table>
</body>
</html>`, "text/html", "UTF-8");
      })
      Web({ src: 'www', controller: this.controller }).javaScriptAccess(true).domStorageAccess(true).fileAccess(true)
    }
  }
}

更多关于HarmonyOS鸿蒙Next中有table表格控件吗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS鸿蒙Next中提供了TableLayout控件，用于实现表格布局。该控件允许开发者通过行和列的方式排列子组件，类似于HTML中的表格。TableLayout支持设置行数和列数，并且可以灵活调整单元格的大小和位置。开发者可以通过XML或代码动态创建表格，并对其样式和行为进行定制。

在HarmonyOS Next中，确实提供了表格控件能力。针对API 14和DevEco Studio 5.0.2环境，您可以通过以下方式实现表格功能：

  1. 基础表格：使用Scroll+Column/Row组合实现简单表格布局
  2. 增强功能：通过List组件配合GridCol/GridRow实现带分页、排序的表格
  3. 复杂交互：建议使用Web组件嵌入第三方表格库（如您链接的antd表格）

当前HarmonyOS原生组件库中没有完全对标antd Table的独立组件，但通过组合方式可以满足：

  • 排序：配合Button+数据重排
  • 分页：使用分页器组件
  • 自定义操作：通过swipeAction等手势组件实现

示例代码片段：

@Entry
@Component
struct SampleTable {
  @State data: Array<object> = []

  build() {
    Scroll() {
      Column() {
        // 表头
        Row() {
          Text('姓名').width('30%')
          Text('年龄').width('20%')
          Text('操作').width('50%')
        }
        // 数据行
        ForEach(this.data, item => {
          Row() {
            Text(item.name).width('30%')
            Text(item.age).width('20%')
            Button('编辑').onClick(()=>{...})
          }
        })
      }
    }
  }
}

对于复杂场景，推荐：

  1. 使用@ohos.data.relationalStore管理表格数据
  2. 配合自定义弹窗实现筛选功能
  3. 分页逻辑建议放在JS侧处理，
回到顶部