用el-table写一个列表页面，新增和编辑写成一个公用弹窗组件以.vue的单独组件，在弹窗组件里面在嵌套一个动态数据的列表用el-table，点击按钮添加，弹出一个嵌套的弹窗用el-form可动态添

在Vue.js中，你可以创建一个名为`TableFormModal.vue`的组件，用于展示表格并处理增删改操作。这里是一个简化的示例：

<template>
  <div ref="modal" class="modal">
    <el-dialog :visible.sync="dialogVisible" title="表单">
      <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
        <!-- 表单内容... -->
      </el-form>
      <div slot="footer">
        <el-button @click="handleSave">保存</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="childDialogVisible" title="嵌套表格">
      <el-table :data="nestedData" :columns="nestedColumns">
        <!-- 表格列配置... -->
      </el-table>
      <button @click="addChildDialog">添加行</button>
      <el-dialog :visible.sync="childChildDialogVisible" title="嵌套子表单">
        <!-- 更细层级的表单... -->
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      childDialogVisible: false,
      childChildDialogVisible: false,
      formData: {},
      rules: {}, // 表单验证规则
      nestedData: [], // 动态数据列表
      nestedColumns: [], // el-table列配置
    };
  },
  methods: {
    handleSave() {
      // 保存表单数据
      this.$emit('save', this.formData);
      this.handleCancel();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    addChildDialog() {
      this.childDialogVisible = true;
    },
    // 其他处理逻辑...
  },
  // 如果有事件监听器从父组件传递过来
  props: ['onSave'],
};
</script>

在这个组件中，我们有两个对话框层，一个包含一个ElForm用于编辑操作，另一个嵌套了一个ElTable来显示动态数据。点击“添加行”会打开更深层级的子表单。

在父组件中，你可能会这么使用这个模态框：

<TableFormModal @save="handleFormSave"></TableFormModal>
<!-- ... -->
<button @click="openModal">打开添加/编辑表单</button>

<script>
methods: {
  openModal() {
    this.$refs.modal.dialogVisible = true;
  },
  handleFormSave(formData) {
    this.$refs.modal.childChildDialogVisible = false; // 关闭子级对话框
    this.onSave(formData); // 调用外部提供的回调函数
  },
}
</script>