avue中 在先现有表格下添加子表单如何操作

在Avue中，在现有表格下添加子表单，需要使用Avue的嵌套表格（nested-table）组件。具体操作步骤如下：

1. 在父表格的columns中添加一个type为`nested`的列，用来显示子表格；
2. 在父表格的data中添加一个与该列key相同的数组，用来保存子表格的数据；
3. 在父表格的scopedSlots中定义一个slot，用来渲染子表格；
4. 在子表格中，需要将该表格的父级row作为prop传递给子表格；
5. 最后，在子表格的columns中定义表头和表格数据。

以下是示例代码：

<template>
  <avue-table :columns="columns" :data="tableData" :options="options">
    <template slot="nested" slot-scope="{ row }">
      <avue-table :columns="childColumns" :data="row.children"></avue-table>
    </template>
  </avue-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        { label: '子表格', prop: 'children', type: 'nested' }
      ],
      tableData: [
        { name: '张三', age: 18, children: [{ name: '小张', age: 5 }, { name: '小李', age: 6 }] },
        { name: '李四', age: 20, children: [{ name: '小王', age: 3 }, { name: '小刘', age: 4 }] },
        { name: '王五', age: 22, children: [] }
      ],
      childColumns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' }
      ],
      options: {
        showHeader: true,
        showPagination: false
      }
    }
  }
}
</script>

在上述代码中，父表格的第三个列为子表格列，该列的type为`nested`，表示该列需要显示子表格。在scopedSlots中定义了一个名为`nested`的slot，用来渲染子表格。子表格中，将该表格的父级row作为prop传递给子表格，以便子表格可以根据父级row来渲染数据。在子表格的columns中定义表头和表格数据，用来显示子表格中的内容。