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 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
使用PHP批量生成随机用户名
2008/07/10 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
python中reduce()函数的使用方法示例
2017/09/29 Python
python机器学习之决策树分类详解
2017/12/20 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
pip安装python库的方法总结
2019/08/02 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
《守株待兔》教学反思
2014/03/01 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
中学社团活动总结
2015/05/07 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
MySQL中一条update语句是如何执行的
2022/03/16 MySQL