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

 更新时间:2019年06月11日 10:49:29   作者:冬瓜先生  
这篇文章主要介绍了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);//从数组中删除当前行
  });
 });
},

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

相关文章

  • 在Echarts图中给坐标轴加一个标识线markLine

    在Echarts图中给坐标轴加一个标识线markLine

    这篇文章主要介绍了在Echarts图中给坐标轴加一个标识线markLine,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 浅谈vue首屏加载优化

    浅谈vue首屏加载优化

    这篇文章主要介绍了浅谈vue首屏加载优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue3全局配置axios的两种方式总结

    Vue3全局配置axios的两种方式总结

    在实际项目开发中,几乎每个组件中都会用到 axios 发起数据请求,下面这篇文章主要给大家总结介绍了关于Vue3全局配置axios的两种方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • Vue标签属性动态传参并拼接字符串的操作方法

    Vue标签属性动态传参并拼接字符串的操作方法

    这篇文章主要介绍了Vue标签属性动态传参并拼接字符串的操作方法,我们需要根据传入值的类型,在placeholder属性赋值"请输入长度",“请输入宽度”,"请输入厚度"等提示字符,本文通过实例代码介绍的非常详细,需要的朋友参考下吧
    2023-11-11
  • 基于vite2+vue3制作个招财猫游戏

    基于vite2+vue3制作个招财猫游戏

    端午将至,大家都开始吃粽子了么?本文将用vite2与vue3开发出一个招财猫小游戏,在图案不停滚动的同时选出可以转出不同的素材最终得到粽子奖励,康康你能用多少次才会转出自己喜爱口味的粽子吧
    2022-05-05
  • Vue MVVM模型与data及methods属性超详细讲解

    Vue MVVM模型与data及methods属性超详细讲解

    MVVM旨在利用WPF中的数据绑定函数,通过从视图层中几乎删除所有GUI代码(代码隐藏),更好地促进视图层开发与模式其余部分的分离,这篇文章主要介绍了Vue MVVM模型与data及methods属性
    2022-10-10
  • vue select选择框数据变化监听方法

    vue select选择框数据变化监听方法

    今天小编就为大家分享一篇vue select选择框数据变化监听方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue3+three.js实现疫情可视化功能

    vue3+three.js实现疫情可视化功能

    这篇文章主要介绍了vue3+three.js实现疫情可视化,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • Vue.js 应用性能优化分析+解决方案

    Vue.js 应用性能优化分析+解决方案

    这篇文章主要介绍了Vue.js 应用性能优化分析以及解决方案,VueJS 是开发网站最受欢迎、最稳定的 JavaScript 框架,但与其他框架一样,如果您忽略它,性能就会受到影响,下面我们就一起来看看怎么才能让性能提升吧
    2021-12-12
  • treeSelect树组件设置父节点禁用的方法实例

    treeSelect树组件设置父节点禁用的方法实例

    这篇文章主要给大家介绍了关于treeSelect树组件设置父节点禁用的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-12-12

最新评论