Vue.js如何通过ElementUI实现CRUD弹框组件封装？

本文共计638个文字，预计阅读时间需要3分钟。

目录+前言+开始封装+JSON对象示例+表格头部作为列表传入，数据结构如下+在子组件中循环渲染输出表头+在父组件中调用+前言+代码写得不好，为什么不好封装一下呢？，因为用的Element组件“

目录

• 前言
• 开始封装
• json对象如下所示
• table表头作为列表传入，数据结构如下
• 在子组件中循环渲染出表头
• 在父组件中调用

前言

代码写得不好，为什么不封装一下呢，如果用的是ElementUI框架，也可以在此基础上进行二次封装。譬如说，这个用来对列表数据进行增删改查的弹框。

开始封装

原本只是个小功能，但是别的模块也需要用到。

我的想法就是，把弹框标题，table表头，必填字节，接口请求路径，增删改查CRUD，等等，放在一个json对象里面。通过父组件向子组件传参的方式，展示不同内容，调用不同的接口。

极大提高了代码的复用性。