【前端6*】表格-表单2（弹窗在父组件）父子组件调用 vue element-ui

---

🌈你好呀！我是 是Yu欸 🌌 2024每日百字篆刻时光，感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅，挖掘无限可能，共同成长！

---

写在最前面

感谢神仙实习单位，老师手把手教O(∩_∩)O~感谢侃哥的讲解，感谢雅欣的讲解录制。

后面对着视频又看了一遍，然后重新写了一遍，梳理流程加快后面代码速度。

全部代码：

我用夸克网盘分享了「form-table-demo (2).zip」，点击链接即可保存。
链接：https://pan.quark.cn/s/7cee269b3221
提取码：hXeC

梳理后代码，主要为：
（子组件）E:\ui\参考代码\demo-new\src\components\detail.vue
（父组件）E:\ui\参考代码\demo-new\src\views\Home.vue

在现代Web开发中，表格和表单是用户交互中最常见的元素。无论是数据展示、编辑，还是信息提交，都离不开表格与表单的有效结合。Vue.js作为一个渐进式的JavaScript框架，配合Element-UI这样强大的组件库，可以大大简化开发流程，提高开发效率。

在本系列的第一篇文章中，我们将梳理如何在Vue.js中使用Element-UI实现表格与表单的结合：如何在父组件中通过按钮触发弹窗，并在弹窗中调用子组件的表单。
这种设计模式在实际项目中非常常见，特别是在需要对数据进行增删改查操作时，能够有效地提升用户体验和代码可维护性。

本文将分为以下几个部分：

1、环境配置与基础介绍
2、父子组件的结构与数据传递
3、使用Element-UI实现弹窗与表单
4、完整示例代码（本文博客）

准备好了吗？让我们开始吧！

一、完整代码

1、（子组件）E:\ui\参考代码\demo-new\src\components\detail.vue

<template>
  <div>
    <el-form
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      inline
      :model="ruleForm"
      :rules="rules"
      :disabled="detailType === 'view'"
    >
      <el-form-item label="日期" prop="date">
        <el-input v-model="ruleForm.date"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-input v-model="ruleForm.province"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    detailType: {
      type: String,
      default: "",
    },
    currentRow: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      ruleForm: {
        name: "",
        date: "",
        province: "",
      },
      rules: {
        date: [{ required: true, message: "请输入日期", trigger: "blur" }],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        province: [
          { required: true, message: "请输入省份", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {},
  created() {
    if (this.detailType === "edit" || this.detailType === "view") {
      this.ruleForm = this.currentRow;
    } else {
      this.ruleForm = {};
    }
  },
};
</script>
<style scoped lang="scss"></style>

2、（父组件）E:\ui\参考代码\demo-new\src\views\Home.vue

<template>
    <!-- 父组件，弹窗在父组件  -->
    <div>
      <h1 class="text-center">测试</h1>
      <el-button icon="plus" @click="handleAdd">新增</el-button>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="date" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
        <el-table-column prop="province" label="省份" width="120">
        </el-table-column>
        <el-table-column prop="city" label="市区" width="120"> </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleView(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="子组件"
        :visible.sync="dialogVisible"
        width="30%"
        @close="handleClose"
      >
        <!-- v-if 重新渲染子组件-->
        <!-- <HelloWorld
          v-if="dialogVisible"
          ref="childRef"
          :detail-type="detailType"
          :currentRow="currentRow"
        ></HelloWorld> -->
        <!-- key重新渲染子组件 -->
        <HelloWorld
          ref="childRef"
          :detail-type="detailType"
          :currentRow="currentRow"
          :key="componentKey"
        ></HelloWorld>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import HelloWorld from "../components/detail.vue";
  export default {
    components: {
      HelloWorld,
    },
    data() {
      return {
        detailType: "",
        currentRow: {},
        dialogVisible: false,
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1517 弄",
            zip: 200333,
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1519 弄",
            zip: 200333,
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1516 弄",
            zip: 200333,
          },
        ],
        componentKey: Math.random(),
      };
    },
    methods: {
      /**弹窗在子组件 */
      // handleAdd() {
      //   this.$refs["childRef"].init("add");
      // },
      // handleEdit(row) {
      //   this.$refs["childRef"].init("edit", row);
      // },
      // handleView(row) {
      //   this.$refs["childRef"].init("view", row);
      // },
      /**弹窗在父组件 */
      handleAdd() {
        this.detailType = "add";
        this.componentKey += 1;
        this.dialogVisible = true;
      },
      handleEdit(row) {
        this.detailType = "edit";
        this.currentRow = row;
        this.componentKey += 1;
        this.dialogVisible = true;
      },
      handleView(row) {
        console.log("row", row);
        this.currentRow = row;
        this.detailType = "view";
        this.componentKey += 1;
        this.dialogVisible = true;
      },
      handleClose() {
        this.dialogVisible = false;
        // this.$refs.childRef.ruleForm = {};
      },
      handleSubmit() {
        this.$refs.childRef.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            const data = this.$refs.childRef.ruleForm;
            this.handleClose();
            console.log("data", data);
            this.tableData.push(data);
          } else {
            return false;
          }
        });
      },
    },
  };
  </script>
  

二、小结

希望本文对你有所帮助。如果你有任何疑问或需要进一步的帮助，请在评论区留言。祝你开发顺利！

---

hello，我是 是Yu欸 。如果你喜欢我的文章，欢迎三连给我鼓励和支持：👍点赞 📁 关注 💬评论，我会给大家带来更多有用有趣的文章。
原文链接 👉 ，⚡️更新更及时。

欢迎大家添加好友交流。