vue+element模态框中新增模态框和删除功能


Posted in Javascript onJune 11, 2019

实现效果如下

vue+element模态框中新增模态框和删除功能

结构

<el-table-column sortable label="操作">
      <template slot-scope="scope">
       <el-button type="primary" @click="getMembers(scope.row.id)">成员</el-button>
       <el-buttontype="primary" @click="delRole(scope.row.id, scope.$index)">删除</el-button>
      </template>
     </el-table-column>
  //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);//从数组中删除当前行
  });
 });
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
索趣科技的答案
Feb 07 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
DOM事件探秘篇
Feb 15 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 #Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 #Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 #Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 #Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 #Javascript
vuex 中插件的编写案例解析
Jun 10 #Javascript
使用webpack搭建vue项目及注意事项
Jun 10 #Javascript
You might like
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
蒂娜商店:Tiina the Store
2019/12/07 全球购物
JDO的含义
2012/11/17 面试题
护理学应聘自荐书范文
2014/02/05 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
中秋节活动总结
2014/08/29 职场文书
三方股份合作协议书
2014/10/13 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
使用Redis做预定库存缓存功能
2022/04/02 Redis