资讯专栏INFORMATION COLUMN

vue+element后台管理系统中,模态框中有新增模态框和删除功能

testHs / 2191人阅读

摘要:实现效果如下结构操作成员删除获取当前行的打开新增成员确定新增请选择用户添加成功从数组中添加当前行删除员工确定删除吗删除成功从数组中删除当前行

实现效果如下

结构

   
            
          
    //scope.$index 获取当前行的index

// 打开新增成员

openAddStaff() {
  this.getAllStaff();
},
// 确定新增
addStaff() {
  if (!this.user) {
    this.$message.error("请选择用户!");
    return;
  }
  this.$post(
    "/api/RoleMemberController/add",
    { userId: this.user.split("/")[0], roleId: this.roleId },
    data => {
      console.log(data,111)
      this.$message.success("添加成功!");
      this.dialogAddStaffVisible = false;
      let item = {
        id: data.rm.id,
        userId: data.rm.userId,
        userCname: this.user.split("/")[1]
      };
      this.staffList.push(item);//从数组中添加当前行
    }
  );
},

// 删除员工

delStaff(id, index) {
  this._confirm("确定删除吗?", () => {
    this.$post("/api/RoleMemberController/delOne", { id: id }, data => {
      this.$message.success("删除成功!");
      this.staffList.splice(index, 1);//从数组中删除当前行
    });
  });
},

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104590.html

相关文章

  • vue项目使用element-ui下拉框选项值为对象时报错

    摘要:在做后台管理时,使用了搭配,请求方法使用了插件,在使用下拉框时,因为我需要获取选中的选项中的其他值,因此需要传入对象。 在做后台管理时,使用了vue搭配elementUI,请求方法使用了axios插件,在使用下拉框时,因为我需要获取选中的选项中的其他值,因此需要传入对象。对select下拉框的文档没有读的很仔细,百度过几篇文章,也没有理解他们表达的意思,然后自己又去看文档,把他的属性看...

    Drummor 评论0 收藏0
  • vue+element,新增和编辑共用一个模态

    摘要:当新增和编辑模态框内容一样时这时候就可以共用一个模态框减少代码量具体代码如下新增新增不需要传递任何参数编辑编辑时候需要传递当前行的模态框内容公司名称请输入内容统一信用社码请输入内容公司地址请输入内 当新增和编辑模态框内容一样时,这时候就可以共用一个模态框,减少代码量,具体代码如下 新增//新增不需要传递任何参数 编辑//编辑时候,需要传递当前行的id 模态框内容 ...

    coolpail 评论0 收藏0
  • 如何在angular.js优雅的使用ui.bootstrap的modal组件

    摘要:提供唯一的方法配置。即文件名,在同一个页面有多个不同业务的模态框的情况下很方便点击确认按钮执行的代码可以从中获取和字段进一步操作发起请求等点击取消按钮执行的代码 ui.bootstrap的modal组件可以很方便地实现页面controller与模态框controller之间通信,特别是弹出的模态框中有比较复杂的表格信息需要用户填写,下面切入主题: 注册全局模态框实例的controlle...

    Jrain 评论0 收藏0
  • vue+element 模态框是表格形式的可编辑表单

    摘要:要实现的效果如下初始化的时候不可编辑点击编辑按钮编辑按钮隐藏取消编辑按钮显示部分输入框变为可编辑营销单详情工单号客户姓名联系电话客户地址营销人员工号 要实现的效果如下,初始化的时候,不可编辑,点击编辑按钮,编辑按钮隐藏,取消编辑按钮显示;部分input输入框变为可编辑showImg(https://segmentfault.com/img/bVbtBnR?w=915&h=437); s...

    nifhlheimr 评论0 收藏0
  • summernote.js实际运用遇到的上传图片大小控制及bootstrap模态框嵌套关闭这两个问

    摘要:需求控制编辑框上传的图片不超过。从文件中找到如下图代码位置,选取需要上传的图片,获取图片的大小,将其当做新增参数,给标签新增属性。我的解决方法就是将在中加载出来的模态框中,关闭按钮的属性替换成代码的事件,用来隐藏模态框,如下图所示。 这里先看一下summernote.js模样,如下图,可以添加图片、视频、链接等。showImg(https://segmentfault.com/img/...

    madthumb 评论0 收藏0

发表评论

0条评论

testHs

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<