<el-table-column label="上头条" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isRecommendTwo"
active-color="#52C4CD"
@change="handelUpdate(scope.$index, scope.row)"
inactive-color="#DCDFE6"
:active-value="true"
:inactive-value="false"
></el-switch>
</template>
</el-table-column>

  

methods: {
handelUpdate(index,row){
    // :active-value得为true
    // :inactive-value得为false
let flag = row.isRecommendTwo //保存点击之后v-modeld的值(true,false) row.isRecommendTwo = !row.isRecommendTwo //保持switch点击前的状态 this.$confirm('是否确认此操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(flag){
row.isRecommendTwo = true
// 逻辑处理
this.$message.success('打开成功!')
}else{
row.isRecommendTwo = false
// 逻辑处理
this.$message.success('关闭成功!')
}
}).catch(() => {
      this.$message.info('取消操作!')
});
},

封装到****.js文件之后的

/**
* @author fu
* @description switch开关 点击按钮后,弹窗确认再改变开关状态
* @param {Object} row 当条数据的内容对象
* @param {String} value v-modeld值
* @returns {Boolean} 打开了按钮返回true,关闭了按钮返回false
*/ function Switchs(_this,row,value){
console.log("switch开关 点击按钮后,弹窗确认再改变开关状态",row)
return new Promise((resolve,rejects) => {
let flag = row[value] //保存点击之后v-modeld的值(true,false) row[value] = !row[value] //保持switch点击前的状态 _this.$confirm('是否确认此操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(flag){
row[value] = true
_this.$message.success('打开成功!')
resolve(true)
}else{
row[value] = false
_this.$message.success('关闭成功!')
resolve(false)
}
}).catch(() => {
_this.$message.info('取消操作!')
});
})
} export default{
  Switchs
}

  

封装之后使用

improt loot from 'loot.js文件路径'

loot.Switchs(this,row,'isRecommendTwo').then(flag=>{
if(flag){
console.log('true')
}else{
console.log('false')
}
})

  

elementui switch 开关,点击确认按钮后在进行开关的更多相关文章

  1. 在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置

    背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: ...

  2. VS2010 使用时选择代码或双击时出错,点击窗口按钮后VS自动重启问题

    VS2010 使用时选择代码或双击时出错崩溃,点击窗口按钮后VS自动重启问题 下载补丁,打上补丁之后,重启电脑,解决了问题. WindowsXP的下载地址:Windows XP 更新程序 (KB971 ...

  3. layui表格点击排序按钮后,表格绑定事件失效解决方法

    最近项目使用layui较为频繁,遇到了一个麻烦的问题,网上搜索也没有看到同类型的问题,故此记下来. 需求是点击上图右侧表格中某一个单元格,会触发点击事件如下代码: $("table>t ...

  4. php中点击下载按钮后待下载文件被清空

    在php中设置了文件下载,下载按钮使用表单的方式来提交 <form method="post" class="form-inline" role=&quo ...

  5. 作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户

    作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...

  6. asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  7. win10系统点击关机按钮后无法关机的解决办法

    先吐槽下:我越发的发现我现在成了修电脑的了,我的职位是linux运维,现在干的活很蛋疼,公司只有我一个运维,修电脑.搞网络.抬服务器.弄监控,搭环境.搞自动化发布.弄虚拟化都我一个人哇.好了,打住. ...

  8. js点击修改按钮后修改

    <button id="click">改变内容</button> <div id="t">要改变的内容</div> ...

  9. 今天遇到的点击添加按钮button_click代码段无法执行的问题

    首先:本人小白一枚,刚入行,如有表述不当的地方,还请多多指教 网页界面如图: 当点击添加按钮后断点测试进入后台代码运行: 代码会先执行Page_Load页面,当加载完后Page_Load代码会跳转到m ...

随机推荐

  1. 刷题记录:[SUCTF 2019]EasySQL

    目录 刷题记录:[SUCTF 2019]EasySQL 一.涉及知识点 1.堆叠注入 2.set sql_mode=PIPES_AS_CONCAT;将||视为字符串的连接操作符而非或运算符 3.没有过 ...

  2. Hadoop平台上HDFS和MapReduce的功能

    1.用自己的话阐明Hadoop平台上HDFS和MapReduce的功能.工作原理和工作过程. HDFS (1)第一次启动 namenode 格式化后,创建 fsimage 和 edits 文件.如果不 ...

  3. 第07组 Alpha冲刺(5/6)

    队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:依然在完善网页编辑器的后端. 展示GitHub当日代码/文档签入记录:(组内共用,已询 ...

  4. Cookie和Session原理

    由于HTTP是无状态的协议,客户程序每次都去web页面,都打开到web服务器的单独的连接,并且不维护客户的上下文信息.如果需要维护上下文信息,比如用户登录系统后,每次都能够知道操作的是此登录用户,而不 ...

  5. python pycharm错误集锦

    url:http://www.cnblogs.com/hinimix/p/8016859.html 1, this list creation could be rewritten as a list ...

  6. OTA升级常见问题

    OTA升级常见问题 问题现象:在进行 OTA 升级测试时,下载成功了升级包,在点击立即更新后,手机一直处于提示“正在更新中”,没能重启进行升级. 问题分析:经过分析发现,因为OTA 应用不具备系统权限 ...

  7. RSA前台加密后台解密

    RSA解密时BadPaddingException java rsa 解密报:javax.crypto.BadPaddingException: Decryption error Java安全架构__ ...

  8. ukulele弹奏模拟器v1.0(待完善)

    写在前面 最近听beyond乐队的<灰色轨迹>听上瘾了,300多遍,震惊!!尤其喜欢最后一分半钟的吉他solo,真可谓吉他没有酒,依然让我醉如老狗.. 翻了翻网上的视频,瞬间觉得单身20年 ...

  9. dockerfile运行mysql并初始化数据

    本文目的不仅仅是创建一个MySQL的镜像,而是在其基础上再实现启动过程中自动导入数据及数据库用户的权限设置,并且在新创建出来的容器里自动启动MySQL服务接受外部连接,主要是通过Dockerfile和 ...

  10. LODOP打印维护适应不同的客户端

    之前的博文:Lodop打印设计.维护.预览.直接打印简单介绍,介绍了打印设计.打印维护.打印预览,直接打印等的区别和使用. 如上面以前博文描述的,打印维护是针对客户端进行调整的,开放打印维护给客户端, ...