avue中 在先现有表格下将编辑中的表格改为子表单如何操作并在子表单中添加增加选项

要将avue中的表格改为子表单，您需要进行以下步骤：

1. 在avue组件中添加子表单组件

2. 将原始表格中的编辑列替换为一个自定义列，该列将显示一个按钮或图标，以便用户可以点击打开子表单。

3. 在子表单中，您可以通过使用avue组件的add方法向表单添加选项。要添加一个选项，您可以在子表单中创建一个按钮或图标，并在单击时调用add方法。

下面是一个简单的示例代码，演示如何将avue中的表格更改为子表单并向子表单中添加选项：

<template>
  <div>
    <avue-crud :table="table" :option="option"></avue-crud>
    <avue-crud :table="subTable" :option="subOption"></avue-crud>
  </div>
</template>

<script>
import { AVueCrud } from 'avue-plugin-element'

export default {
  name: 'MyTable',
  components: { AVueCrud },
  data() {
    return {
      table: {
        url: '/api/table',
        columns: [
          { prop: 'name', label: '名称' },
          { prop: 'age', label: '年龄' },
          { prop: 'gender', label: '性别' },
          { type: 'custom', label: '操作', width: 200, render: this.renderSubForm }
        ]
      },
      subTable: {
        columns: [
          { prop: 'name', label: '名称' },
          { prop: 'age', label: '年龄' },
          { prop: 'gender', label: '性别' }
        ]
      },
      option: {
        addBtn: false,
        editBtn: false,
        delBtn: false
      },
      subOption: {
        addBtn: true,
        editBtn: false,
        delBtn: true
      }
    }
  },
  methods: {
    renderSubForm(h, { row }) {
      return h('Button', {
        props: { type: 'primary' },
        on: { click: () => this.showSubForm(row) }
      }, '编辑')
    },
    showSubForm(row) {
      this.$refs.subTable.add({ name: '', age: '', gender: '' })
    }
  }
}
</script>

在上面的代码中，我们首先定义了两个表格组件：一个主表格和一个子表格。主表格的列中包含一个自定义列，该列将显示一个“编辑”按钮，以便用户可以打开子表单。当用户单击“编辑”按钮时，我们将调用showSubForm方法，该方法将使用子表单的add方法向表单添加一个新选项。

请注意，我们在主表格和子表格中分别设置了不同的选项（option和subOption）。这是因为我们希望禁用主表格中的添加和编辑按钮，同时启用子表格中的添加和删除按钮。

最后，您需要将renderSubForm方法传递给主表格组件的自定义列中，以便该列能够正确地呈现“编辑”按钮。