一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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: "主题描述",
    },
],

在子组件中循环渲染出表头


  

在父组件中调用


热门栏目