vue element-ui 中表单弹框的使用
- 写在最前面
- 一、完整代码
- 1、（子组件）E:\ui\参考代码\demo-new\src\components\detail.vue
- 2、（父组件）E:\ui\参考代码\demo-new\src\views\Home.vue
- 二、小结
写在最前面
感谢神仙实习单位，老师手把手教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欸 。如果你喜欢我的文章，欢迎三连给我鼓励和支持：👍点赞 📁 关注 💬评论，我会给大家带来更多有用有趣的文章。
原文链接 👉 ，⚡️更新更及时。
欢迎大家添加好友交流。
