elementUi——table表格实现父子项的展示(树形数据)

客官°小女子只卖身不卖艺 2022-09-03 04:28 29阅读 0赞

今天后端同事要求实现如下的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
参考的`elementUi`中的`table`中的树形数据结构：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
支持树类型的数据的显示。当 `row` 中包含 `children` 字段时，被视为`树形数据`。渲染`树形数据`时，必须要指定 `row-key`。支持子节点数据异步加载。设置 `Table` 的 `lazy` 属性为 `true` 与加载函数 `load`。通过指定 `row` 中的 `hasChildren` 字段来指定哪些行是包含子节点。`children` 与 `hasChildren` 都可以通过 `tree-props` 配置。

通过上面的介绍，我们发现，如果要实现这种树形结构，则需要添加`children`的数据，因此如果接口返回的数据格式不正确，则需要自行处理一下。

## 1.数据结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
上面数据结构中的`subPlans`就是子订单的数据，也就是树形结构折叠隐藏的部分，这部分的参数名需要为`children`，当然也可以是其他参数名。  
为了能够达到树形结构的效果，需要将父级订单和子级订单的参数名保持一致。但是目前`subPlans`中的数据并不全，则需要对数据进行如下处理：

需要注意的一点是：如果子级也有`children`,则子级也会有子级结构，因此为了保证只有一级树形结构，则需要将子级的`children`删除掉。

this.tableData.forEach((t, tIndex) => { 
      if (t.subPlans.length > 0) { 
        t.children = [];
        var item = JSON.parse(JSON.stringify(t));
        delete item.subPlans;
        delete item.children;
        t.subPlans.forEach((s, sIndex) => { 
          s.showName = false;
          if (sIndex == t.subPlans.length - 1) { 
            s.operate = true;
          } else { 
            s.operate = false;
          }
          t.children.push({ 
            ...item,
            ...s,
          });
        });
      } else { 
        t.children = [];
      }
    });

## 2.`html`部分代码 ##

需要注意的几点：

1.  `row-key`:这个必须要保证唯一，否则表格渲染会报错
2.  `default-expand-all`:默认折叠部分是打开的状态
3.  `tree-props`:是指定`children`子级的参数，`hasChildren`是对应的数据中是否有子级的字段，如果数据结构中没有指定，则写上也是不起作用的

<el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      ref="table"
      :height="tableHeight"
      default-expand-all
      v-loading="tableLoading"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        prop="orderNum"
        label="订单编号"
        width="230"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.showName != false">{ { 
            scope.row.orderNum
          }}</span>
        </template>
      </el-table-column>
    </el-table>

最终效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/68eb51bf891946d7abbe2cbdaf2a7fc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/6a70b3ffd2494c8b8cec673479d80785.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/dc7c29c79c1340bb9fa8a333cbefbf9e.png