HarmonyOS 鸿蒙Next中如何使用Web实现表格组件

HarmonyOS 鸿蒙Next中如何使用Web实现表格组件 如何使用Web实现表格组件？

6 回复

使用Web组件访问在线网页时需在module.json5添加网络权限：ohos.permission.INTERNET，具体申请方式请参考声明权限。离线网页【例如本地html资源】就不需要

"requestPermissions":[
    {
      "name" : "ohos.permission.INTERNET"
    }
  ]

Web组件可以通过data url方式直接加载HTML字符串。

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  htmlStr: string = "data:text/html,<html lang=\"zh-CN\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>简单HTML表格</title><style>/* 简单样式美化，可选（不影响表格核心功能） */table {width: 80%;/* 表格宽度占页面80% */margin: 20px auto;/* 居中显示 */border-collapse: collapse;/* 合并边框 */font-family: Arial, sans-serif;}th,td {border: 1px solid #333;/* 边框颜色 */padding: 12px;/* 内边距 */text-align: center;/* 文字居中 */}th {background-color: #f2f2f2;/* 表头背景色 */font-weight: bold;/* 表头文字加粗 */}tr:nth-child(even) {background-color: #f9f9f9;/* 偶数行背景色（隔行变色） */}</style></head><body><h2 style=\"text-align: center;\">学生成绩表</h2><!-- 表格核心结构 --><table><!-- 表头 --><thead><tr><th>学号</th><th>姓名</th><th>语文</th><th>数学</th><th>英语</th><th>平均分</th></tr></thead><!-- 表体（数据行） --><tbody><tr><td>001</td><td>张三</td><td>92</td><td>88</td><td>95</td><td>91.7</td></tr><tr><td>002</td><td>李四</td><td>85</td><td>94</td><td>89</td><td>89.3</td></tr><tr><td>003</td><td>王五</td><td>78</td><td>90</td><td>83</td><td>83.7</td></tr><tr><td>004</td><td>赵六</td><td>96</td><td>98</td><td>92</td><td>95.3</td></tr></tbody></table></body></html>"
  build() {
    Column() {
      // 组件创建时，加载htmlStr
      Web({ src: this.htmlStr, controller: this.controller })
    }
  }
}

cke_139.png

相关文档：

更多关于HarmonyOS 鸿蒙Next中如何使用Web实现表格组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用Web组件加载本地html（如table.html）

Web({ 
  src: $rawfile('table.html'),  // 本地HTML文件
  controller: this.controller 
})
  .width('100%')
  .height('100%')

在 resources/rawfile/table.html 中:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </table>
</body>
</html>

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

采用Web Components技术

class DataGrid extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        table { border-collapse: collapse; width:100% }
        td, th { border: 1px solid #ddd; padding:8px }
      </style>
      <table>
        <slot name="header"></slot>
        <slot name="body"></slot>
      </table>`;
  }
}
customElements.define('data-grid', DataGrid);

在HarmonyOS Next中，使用Web组件实现表格需通过ArkTS语言开发。首先引入Web组件，加载包含表格的HTML页面。HTML中可使用标准<table>标签定义表格结构，结合CSS样式控制外观。通过Web组件的loadUrl()方法加载本地或在线HTML资源，并利用onPageEnd事件监听页面加载完成状态。若需动态更新表格数据，可通过runJavaScript()方法执行JS脚本操作DOM。注意确保Web组件已配置domStorageAccess权限以支持本地存储功能。

在HarmonyOS Next中，可以通过Web组件加载HTML页面实现表格功能。具体步骤如下：

  1. 创建HTML资源文件
    在resources/rawfile目录下创建包含表格的HTML文件（如table.html），使用标准<table>标签定义表格结构：

    <table border="1">
  <tr><th>姓名</th><th>年龄</th></tr>
  <tr><td>张三</td><td>25</td></tr>
</table>

  2. 通过Web组件加载
    在ArkTS页面中，使用Web组件加载本地HTML资源：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct TablePage {
  controller: WebController = new WebController();

  build() {
    Column() {
      Web({ src: $rawfile('table.html'), controller: this.controller })
        .width('100%')
        .height('100%')
    }
  }
}

  3. 动态数据交互（可选）
    若需动态更新数据，可通过runJavaScript()方法执行JS代码：

    // 在Web组件中注入脚本更新表格
this.controller.runJavaScript({
  script: 'document.getElementById("data").innerHTML="新数据"'
});

注意事项

  • 确保HTML文件编码为UTF-8
  • 复杂交互建议使用onMessage进行原生与Web的双向通信
  • 表格样式可通过内联CSS或外部CSS文件定义

此方案适用于静态表格或轻量动态数据场景，复杂业务逻辑建议使用Native容器组件实现更高性能。

回到顶部