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不同页面传值的改进版
Sep 30 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
php email邮箱正则
2008/10/08 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
django的ORM模型的实现原理
2019/03/04 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python计算无向图节点度的实例代码
2019/11/22 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
Python基于execjs运行js过程解析
2020/11/27 Python
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
大学生助学金感谢信
2015/01/21 职场文书
学生检讨书范文
2015/01/27 职场文书
大一学生个人总结
2015/02/15 职场文书
行政前台岗位职责
2015/04/16 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers