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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python绘图方法实例入门
2015/05/19 Python
python中的colorlog库使用详解
2019/07/05 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python enumerate内置库用法解析
2020/02/24 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
python一些性能分析的技巧
2020/08/30 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
日语求职信范文
2013/12/17 职场文书
医院辞职信范文
2014/01/17 职场文书
银行办理业务介绍信
2014/01/18 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
政协会议宣传标语
2014/10/09 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript