如何在 Vue 中创建一个带有表格和表单的弹窗

本文将通过一个具体的示例来介绍如何在 Vue 应用中实现一个带有表格和表单功能的弹窗组件。我们将使用 Element UI 库中的 el-dialog 组件来构建这个弹窗，并结合 el-table 和 el-form 来展示数据并允许用户进行编辑。

效果图：

完整代码最底部，以下拆分解析----------

1. 引入必要的 Element UI 组件
 

2. 创建弹窗结构
接下来定义弹窗的基本结构。这里我们使用 el-dialog 组件，并为其设置一些基本属性如标题、宽度等：

3. 添加表单和表格
在弹窗内部添加一个表单 (el-form) 和表格 (el-table)，并通过 v-model 双向绑定数据

4. 定义表格列
为表格定义多个列，包括索引、发票类型选择器、输入框等：

5. 添加操作按钮
在弹窗底部添加两个按钮用于关闭和保存：

  取消
  保存

6. 定义相关方法
最后，在 Vue 实例的方法部分定义与弹窗相关的处理逻辑，例如关闭时重置表单、保存数据等：

export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      typeList: [], // 示例数据
      formRef: null,
      dialogRef: null
    };
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    beforeClose(done) {
      this.resetForm('formRef');
      done();
    },
    deleteRow(index, row) {
      this.tableData.splice(index, 1);
    },
    closeDialog() {
      this.dialogVisible = false;
      this.resetForm('formRef');
    },
    saveData(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 保存数据逻辑
          console.log(this.tableData);
          this.closeDialog();
        }
      });
    },
    renderHeader(h, { column }) {
      return h('span', [
        h('i', { style: 'color: #409EFF' }, '添加行'),
        h('span', '操作')
      ]);
    }
  }
};

完整代码如下：