vue.js基于ElementUI封装了CRUD的弹框组件

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

前言

代码写得不好，为什么不封装一下呢，如果用的是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: "主题描述",
    },
],

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

<el-table-column
  v-for="(item, index) in columnList"
  :key="index"
  :show-overflow-tooltip="item.showOverflowTooltip || true"
  :align="item.align || 'center'"
  :header-align="item.headerAlign || item.align || 'center'"
  :label="item.label"
  :width="item.width"
>
  <template slot-scope="scope">
    <span v-if="scope.row.statusBtn === false">{{ scope.row[item.prop] }}</span>
    <el-input
      v-else-if="scope.row.statusBtn === true"
      v-model="scope.row[item.prop]"
      size="mini"
    />
  </template>
</el-table-column>

在父组件中调用

<!-- 编辑主题的弹框 -->
<edit-table-modal
  ref="editTableModal"
  :visible.sync="editTableModal.show"
  :tableObject="themeTableObject"
  v-if="editTableModal.show"
  @ok="editTableFunction"
/>

到此这篇关于vue.js基于ElementUI封装了CRUD的弹框组件的文章就介绍到这了,更多相关 ElementUI封装CRUD内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue elementUI 处理文件批量上传方式

    目录 elementUI 如何处理文件批量上传 问题 解决 elementUI批量上传下载注意事项 在el-upload组件关键的钩子,其它省略 点击上传,将多个文件和表单数据一起上传 elementUI 如何处理文件批量上传 问题 elementUI的Upload上传组件,通过设置multiple为true,就可以实现多选文件:但是在处理的时候还是一个一个传上去.目前需要在所有文件上传后,将某几个上传错误的结果拼接起来做一次提醒 解决 this.$refs.upload.uploadFiles

  • 前端elementUI select选择器实现远程搜索

    前端elementUI select选择器实现远程搜索

    目录 elementUI select选择器远程搜索 测试背景 菜鸟用法 官方参考 elementUI select选择器远程搜索 测试背景 先提下背景:就是在测试的过程中,经常需要用到收货这个功能.在PC端下了采购单,再到APP去对应功能里,再输入好多个字段,上传图片等动作后,终于可以提交. 于是,我决定在平台上加个小工具,快捷收货,方便测试用. 那么,在收货操作中,要有收货人这个角色.为了更好的适用性,我决定做成一个搜索框,支持实时搜索人员.于是,从elementUI上找到了select选择

  • VUE-ElementUI 时间区间选择器的使用

    VUE-ElementUI 时间区间选择器的使用

    目录 VUE-ElementUI 时间区间选择器 一.单个输入框 二.两个输入框 elementUI-日期选择器(两个框 限制选择范围.快捷键选择) 两个日期框选择 VUE-ElementUI 时间区间选择器 官方文档中使用picker-options属性来限制可选择的日期 一.单个输入框 <el-date-picker        v-model="value1"        type="date"        placeholder="选择

  • Mybatis-Plus 通用CRUD的详细操作

    Mybatis-Plus 通用CRUD的详细操作

    目录 1.插入操作 1.1 方法定义 1.2 测试用例 1.3 测试 1.4 @TableField 2.更新操作 2.1 根据id更新 2.2 根据条件更新 3.删除操作 3.1 deleteById 3.2 deleteByMap 3.3 delete 3.4 deleteBatchIds 4.查询操作 4.1 selectById 4.2 selectBatchIds 4.3 selectOne 4.4 selectCount 4.5 selectList 4.6 selectPage 5

  • EF Core的CRUD(增删改查)基本操作

    一.增加(C) 单笔增加 //添加 static void Add() { using (var db = new Entities()) { Student stu1 = new Student { Name = "李四", Age = 19, Adress = "合肥", PhoneNumber = "13200000000" }; //把实体对象附加到上下文 db.Student.Add(stu1); //db.Entry(stu1).St

  • Mybatis-Plus实体类注解方法与mapper层和service层的CRUD方法

    Mybatis-Plus实体类注解方法与mapper层和service层的CRUD方法

    目录 1 注解 1.1 @TableName 1.2 @TableId 1.3 @TableField 1.4 @TableLogic 2 mapper层的CRUD方法 2.1 增(insert) 2.2 删(delete) 2.3 改(update) 2.4 查(select) 3 service层的CRUD方法 3.1 批量添加或者更新 3.2 查询表中总记录数 1 注解 1.1 @TableName   之前在入门案例中我们分析过:使用mp底层方法生成的SQL语句中,表名为mapper或者

  • 解决elementui中NavMenu导航菜单高亮问题(解决多种情况)

    解决elementui中NavMenu导航菜单高亮问题(解决多种情况)

    目录 前言 我在项目中遇到的情况有三种:(vue-cli+elementui) 1.横向菜单 2.纵向菜单 3.嵌套式菜单 代码实现 1.横向菜单 2.纵向菜单 3.嵌套式菜单 前言 如果使用elementui这个框架来开发系统,那么我们几乎都会使用到NavMenu 组件. 我们可能需要菜单根据我们点击的那一项高亮显示,刷新页面了之后还是会相应的高亮显示. elementUI组件官网: https://element.eleme.io/#/zh-CN/component/menu 我在项目中遇到

  • ElementUI时间选择器限制选择范围disabledData的使用

    关于结束时间不能大于开始时间的问题,在elementui里我们用官方提供的 disabledDate 选项来解决.HTML:给选择器加上:picker-options属性 //开始时间 <el-date-picker v-model="startDate"></el-date-picker> //截止时间 <el-date-picker v-model="endDate" :picker-options="endDateOpt

  • mybatisplus 复合主键(多主键) CRUD示例详解

    mybatisplus 复合主键(多主键) CRUD示例详解

    目录 mybatisplus复合主键CRUD 需求描述 mybatisplus-plus mybatisplus 复合主键CRUD 需求描述 最近接到个挺有意思的需求,做用户观看学习视频时长的一个数据埋点 储存用户观看视频时长.记录的接口的调用肯定会特别频繁,因为每间隔指定时间每个用户都会调用,如果在这个接口里直接操作数据库将会给我们的数据库带来一定的压力,在我的代码中是不允许的,而我是这样完成这个需求的: 首先将用户观看视频的时长.记录存储到阿里云的日志库里,随后以定时器从阿里云的日志库中拉取

  • vue.js基于ElementUI封装了CRUD的弹框组件

    vue.js基于ElementUI封装了CRUD的弹框组件

    目录 前言 开始封装 json对象如下所示 table表头作为列表传入,数据结构如下 在子组件中循环渲染出表头 在父组件中调用 前言 代码写得不好,为什么不封装一下呢,如果用的是ElementUI框架,也可以在此基础上进行二次封装.譬如说,这个用来对列表数据进行增删改查的弹框. 开始封装 原本只是个小功能,但是别的模块也需要用到. 我的想法就是,把弹框标题,table表头,必填字节,接口请求路径,增删改查CRUD,等等,放在一个json对象里面.通过父组件向子组件传参的方式,展示不同内容,调用不

  • vue.js中toast用法及使用toast弹框的实例代码

    1.首先引入 import { Toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

  • 如何一步步基于element-ui封装查询组件

    如何一步步基于element-ui封装查询组件

    目录 功能 基本的查询功能 查询条件初始化 渲染页面 更多查询以及展示优化 下拉组件联动查询 组件扩展 搜索条件展示 添加功能按钮区 写在最后 功能 接着前一篇文章基于element-ui框架封装一个更好用的表格组件,我们开始写查询组件. 查询组件的话,需要有什么呢? 下面我画了一个粗略的原型,基本描述了查询组件需要实现的功能了. 基本的查询功能 [输入条件,选择下拉数据点击查询] 添加查询下拉面板 [很多查询的话,一行放不下,需要给一下更多查询下拉面板,除掉默认查询的条件,都放下拉面板去,具体

  • 基于element-ui封装可搜索的懒加载tree组件的实现

    引言 最近开发项目时遇到一个需求就是采用tree的方式展示以万为单位的数据,因为数据量大第一反应就是采用"懒加载"的方式实现,为了方便用户在庞大的数据量中快速定位到某个节点搜索功能也是必不可少的:因为采用"懒加载"数据,搜索当然也是远程搜索了:确定了需求当然第一时间就去网上找有没有小伙伴已经实现了相关组件,最后....,还是自己实现一个吧(由于公司采用的element-ui所以基于el-tree进行改造):[这只是自己实现的一种思路,希望大家多多指正] 1.懒加载树

  • 使用Vue.js和Element-UI做一个简单登录页面的实例

    最近了解到Vue.js挺火的,有同学已经学习了,那我心里痒痒的也学习了一点,然后也学了一点Element组件,就做了简单的登录页面. 效果很简单: 代码如下: 前端页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" hr

  • vue.js与element-ui实现菜单树形结构的解决方法

    由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据格式是这个样子的: data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID

  • vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

    vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

    本文实例讲述了vue.js基于v-for实现批量渲染 Json数组对象列表数据.分享给大家供大家参考,具体如下: Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便.即使是复杂的 Json数组对象,也可以使用 多层嵌套的 v-for 实现,格式如下: <div v-for="(item,index) in items"> <div v-for="(list,index) in item.lists&quo

  • vue基于element-ui的三级CheckBox复选框功能的实现代码

    最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,下面通过本文给大家讲解实现方法. 效果图预览: 首先是页面布局,当然也可已使用table,但是自己用flex布局后面更容易增删改查其他功能 <div class="deliverySetting-table"> <div class="table-head"> <div clas

  • 基于element-ui封装表单金额输入框的方法示例

    基于element-ui封装表单金额输入框的方法示例

    在日常的迭代开发中通常我们会遇到这样的场景:在一个表单中需要用户输入金额,并校验金额的格式.这个需求你一定遇到过,但是现在,我们还需要做到:当用户离开输入框(失去焦点)时,输入的内容变成了用逗号每隔 3 位分隔的数字,并展示给用户.且最后提交金额时,参数的值仍然是正常数字,不包含逗号. 遇到这种需求,我们首先要想到「表单中的金额输入框」是常见到的功能.既然是常见的功能,我们要将它抽象封装起来,做到随时可用于任何表单中,用一行代码代替重复作业. 像表单项一样,我们需要给组件传递 label,绑定值

  • vue.js使用Element-ui中实现导航菜单

    vue.js使用Element-ui中实现导航菜单

    本文实例为大家分享了vue.js使用Element-ui中实现导航菜单的具体代码,供大家参考,具体内容如下 写这个的原因是因为当时写这个功能时候element只有效果,但是功能没有实现,当时一头雾水 先放图吧 大体实现思路我先讲一下不然下面代码片段会看懵, 圈出来的左右两部分,左边是element复制就可实现, 右边是跳转的子组件. 首先创建导航菜单的vue文件,但这个文件里面只是引入组件,里面使用Container布局容器实现左右两部分,左边el-aside标签中放入导航菜单的组件,右边el-

随机推荐