本篇文章小编给大家分享一下vue.js基于ElementUI封装了CRUD的弹框组件代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
前言
代码写得不好,为什么不封装一下呢,如果用的是ElementUI框架,也可以在此基础上进行二次封装。譬如说,这个用来对列表数据进行增删改查的弹框。
开始封装
原本只是个小功能,但是别的模块也需要用到。
我的想法就是,把弹框标题,table表头,必填字节,接口请求路径,增删改查CRUD,等等,放在一个json对象里面。通过父组件向子组件传参的方式,展示不同内容,调用不同的接口。
极大提高了代码的复用性。
json对象如下所示
// 示例: let example = { // 弹框标题 popTitle: "编辑主题", // table columnList: [ { prop: "themeName", label: "主题名称", }, { prop: "themeDescribe", label: "主题描述", }, ], // 必填的字段 requiredKeys: ["themeName"], tableData: this.themeList, // 主键,默认为id idKey: "id", // 删除的参数名称,默认为ids deleteKey: "ids", // 批量的参数名称,默认为ids batchDeleteKey: "ids", // 接口请求路径,增删改查CRUD interfaceUrl: { add: "/target/addTheme", edit: "/target/updateTheme", delete: "/target/deleteTheme", // 批量删除 batchDelete: "/target/deleteTheme", list: "/target/themelist", }, };
table表头作为列表传入,数据结构如下
columnList: [ { prop: "themeName", label: "主题名称", }, { prop: "themeDescribe", label: "主题描述", }, ],
在子组件中循环渲染出表头
{{ scope.row[item.prop] }}
在父组件中调用