hotTable parent-child 创建树形

HotTable是一个表格组件，由Element Plus库提供，主要用于Vue.js应用中展示数据。创建树形结构在HotTable中通常涉及到数据预处理以及动态列布局。以下是基本步骤：

1. **数据结构**：首先，你需要有一个嵌套的数据结构，每个节点包含`children`属性来表示它的子节点。例如：

   {
     "id": 1,
     "name": "父节点",
     "children": [
       {
         "id": 2,
         "name": "子节点A",
         "children": [...]
       },
       {
         "id": 3,
         "name": "子节点B",
         "children": [...]
       }
     ]
   }

2. **配置选项**：在使用HotTable时，设置`columns`数组来包括一个特殊列，如`expand`列，用于展开和折叠子行。同时，启用`row-expand`功能：

   const columns = [
     { field: 'id', title: 'ID' },
     { field: 'name', title: '名称' },
     // 添加一个用于展开和折叠的列
     { field: 'expand', title: ' ', expandable: true, cell: () => '' }
   ];

3. **初始化数据**：在渲染表格时，需要将上述数据绑定到`data`属性上，并在`rowRender`回调函数中处理展开内容的显示隐藏。

4. **事件处理**：监听`expand-row`事件，当点击展开图标时，可以获取当前行数据并进一步处理子节点的加载或显示。

hot.on('expand-row', ({index, node}) => {
  // 展开子节点或请求数据
});