elementui 树形表格中子节点展开行表单

对于 ElementUI 的树形表格中的子节点展开行表单，你可以在表格的 `row-template` 中使用 `v-if` 来判断当前行是否为父节点，如果是，则渲染表单的内容。当用户点击父节点的展开按钮时，可以通过 `row-expand` 事件来获取当前父节点的信息，然后使用 `toggleRowExpansion` 方法将子节点展开，并在展开的子节点中渲染表单。

以下是一个简单的示例代码：

<template>
  <el-table :data="tableData" :row-key="row => row.id" :expand-row-keys="expandedKeys" @row-expand="handleRowExpand">
    <el-table-column type="expand"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-button v-if="scope.row.isParent" @click="toggleExpansion(scope.row)">展开</el-button>
      </template>
    </el-table-column>
    <el-table-column label="表单" :row-template="scope => rowTemplate(scope.row)"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '父节点1', isParent: true, address: '地址1', form: { username: '', age: '' } },
        { id: 2, name: '子节点1-1', parentId: 1, address: '地址2', form: {} },
        { id: 3, name: '子节点1-2', parentId: 1, address: '地址3', form: {} },
        { id: 4, name: '父节点2', isParent: true, address: '地址4', form: { email: '', phone: '' } },
        { id: 5, name: '子节点2-1', parentId: 4, address: '地址5', form: {} },
        { id: 6, name: '子节点2-2', parentId: 4, address: '地址6', form: {} },
      ],
      expandedKeys: [],
    };
  },
  methods: {
    rowTemplate(row) {
      if (row.isParent) {
        return (
          <el-form>
            <el-form-item label="用户名">
              <el-input v-model={row.form.username}></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model={row.form.age}></el-input>
            </el-form-item>
          </el-form>
        );
      }
      return null;
    },
    toggleExpansion(row) {
      this.$refs.table.toggleRowExpansion(row);
    },
    handleRowExpand(row) {
      if (row.isParent) {
        this.expandedKeys.push(row.id);
      }
    },
  },
};
</script>

在这个示例中，我们使用 `row-template` 来渲染表格的每一行，如果当前行是父节点，则渲染一个包含用户名和年龄输入框的表单。点击父节点的展开按钮时，我们使用 `toggleRowExpansion` 方法将子节点展开，并将展开的父节点的 `id` 添加到 `expandedKeys` 数组中。当子节点展开时，会自动渲染子节点的内容，这里我们并没有在子节点中渲染表单。你可以根据需要自行调整代码。