最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue.js基于ElementUI封装了CRUD的弹框组件代码示例
时间:2022-07-04 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下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] }}
在父组件中调用
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12