iView表格如何加子级

iView是一个基于Vue.js的前端组件库，其中iview-table（iView表格）提供了一个强大的表格组件，用于展示数据。如果你想在iview表格中添加子级数据，通常是在列上设置嵌套的数据结构，并利用`expand-row`属性来展开和折叠行。

以下是基本步骤：

1. **数据准备**：确保你的表格数据中包含子级信息，例如每个行都有一个`children`字段，这个字段是一个数组，存储了子级的对象。

{
  "id": 1,
  "name": "父级",
  "children": [
    {
      "id": 2,
      "name": "子级1"
    },
    {
      "id": 3,
      "name": "子级2"
    }
  ]
}

2. **模板配置**：在`<template>`部分，设置表格列，如果需要显示子级，可以添加一个`expand`属性来指定哪些列支持展开：

<template>
  <Table :data="tableData" :row-key="getRowKey">
    <Column field="name" title="名称" width="200"></Column>
    <!-- 添加 expand 属性 -->
    <Column field="children" title="子级" prop="children" expand></Column>
  </Table>
</template>

3. **方法实现**：如果你希望用户手动展开或折叠行，可以使用`on-expand-change`事件处理程序，它会在每条记录展开或折叠时触发：

<script>
export default {
  data() {
    return {
      tableData: [], // 确保初始化好你的数据
      isExpanded: false // 可选的初始状态
    };
  },
  methods: {
    onExpandChange(row) {
      this.isExpanded = !this.isExpanded; // 切换当前行的状态
    }
  }
};
</script>

4. **样式调整**：为了美观，你可以调整展开行的样式，比如添加图标、更改背景等。

记得导入所需的依赖，并确保你的数据已经适配到iview表格组件的API。