1. <el-table-column label="上头条" align="center">
  2. <template slot-scope="scope">
  3. <el-switch
  4. v-model="scope.row.isRecommendTwo"
  5. active-color="#52C4CD"
  6. @change="handelUpdate(scope.$index, scope.row)"
  7. inactive-color="#DCDFE6"
  8. :active-value="true"
  9. :inactive-value="false"
  10. ></el-switch>
  11. </template>
  12. </el-table-column>

  

  1. methods: {
  2. handelUpdate(index,row){
  3.     // :active-value得为true
  4.     // :inactive-value得为false
  5. let flag = row.isRecommendTwo //保存点击之后v-modeld的值(true,false)
  6.  
  7. row.isRecommendTwo = !row.isRecommendTwo //保持switch点击前的状态
  8.  
  9. this.$confirm('是否确认此操作?', '提示', {
  10. confirmButtonText: '确定',
  11. cancelButtonText: '取消',
  12. type: 'warning'
  13. }).then(() => {
  14. if(flag){
  15. row.isRecommendTwo = true
  16. // 逻辑处理
  17. this.$message.success('打开成功!')
  18. }else{
  19. row.isRecommendTwo = false
  20. // 逻辑处理
  21. this.$message.success('关闭成功!')
  22. }
  23. }).catch(() => {
  24.       this.$message.info('取消操作!')
  25. });
  26. },

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

  1. /**
  2. * @author fu
  3. * @description switch开关 点击按钮后,弹窗确认再改变开关状态
  4. * @param {Object} row 当条数据的内容对象
  5. * @param {String} value v-modeld值
  6. * @returns {Boolean} 打开了按钮返回true,关闭了按钮返回false
  7. */
  8.  
  9. function Switchs(_this,row,value){
  10. console.log("switch开关 点击按钮后,弹窗确认再改变开关状态",row)
  11. return new Promise((resolve,rejects) => {
  12. let flag = row[value] //保存点击之后v-modeld的值(true,false)
  13.  
  14. row[value] = !row[value] //保持switch点击前的状态
  15.  
  16. _this.$confirm('是否确认此操作?', '提示', {
  17. confirmButtonText: '确定',
  18. cancelButtonText: '取消',
  19. type: 'warning'
  20. }).then(() => {
  21. if(flag){
  22. row[value] = true
  23. _this.$message.success('打开成功!')
  24. resolve(true)
  25. }else{
  26. row[value] = false
  27. _this.$message.success('关闭成功!')
  28. resolve(false)
  29. }
  30. }).catch(() => {
  31. _this.$message.info('取消操作!')
  32. });
  33. })
  34. }
  35.  
  36. export default{
  37.   Switchs
  38. }

  

封装之后使用

  1. improt loot from 'loot.js文件路径'
  2.  
  3. loot.Switchs(this,row,'isRecommendTwo').then(flag=>{
  4. if(flag){
  5. console.log('true')
  6. }else{
  7. console.log('false')
  8. }
  9. })

  

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. 【软工实践】Alpha冲刺(6/6)

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 tomcat的学习与实现 服务器后端部署,API接口的beta版实现 后端代码 ...

  2. pg_escape_string专用于转义数据库敏感字符

    (PHP 4 >= 4.2.0, PHP 5) pg_escape_string — 转义 text/char 类型的字符串 说明 string pg_escape_string ( strin ...

  3. (8)Flask微电影项目会员中心其他页面搭建

    会员中心修改密码.评论.登录日志和收藏电影4个页面的内容. 一.修改密码页面: {% extends "home/home.html" %} {% block css %} < ...

  4. 关于H5项目开发中TS(或JS)文件按照顺序编译成一个文件的记录

    由于js的执行特性,多个js文件合成一个文件或者进行多个js文件加载时,时需要按照指定的顺序进行的,否则会出现报错的情况. 我们看一下目前几个主流H5引擎的做法. 白鹭的做法 当前版本的做法 在tsc ...

  5. CEF CefSettings 结构体 详解

    1. single_process: 设置为ture时,browser和render使用同一个进程.Chromium 不正是支持此运行模式,并且不如默认的多进程稳定. 2. no_sandbox: 沙 ...

  6. osg::Node位置移动

    osg::Node节点移动的时候,可以使用osg::Matrix::translate  来完成 osg::Matrix::translate中的参数是  当前位置到目标位置需要改变的值,所以,传递参 ...

  7. GSON工具类

    import java.util.Map; import com.google.gson.reflect.TypeToken; import com.google.gson.FieldNamingPo ...

  8. (转)自动微分(Automatic Differentiation)简介——tensorflow核心原理

    现代深度学习系统中(比如MXNet, TensorFlow等)都用到了一种技术——自动微分.在此之前,机器学习社区中很少发挥这个利器,一般都是用Backpropagation进行梯度求解,然后进行SG ...

  9. java获取当前项目路径System.getProperty("user.dir")

    System.getProperty("user.dir") 就是项目的文件夹绝对路径

  10. java并发-ReentrantLock的lock和lockInterruptibly的区别

    ReentrantLock的加锁方法Lock()提供了无条件地轮询获取锁的方式,lockInterruptibly()提供了可中断的锁获取方式.这两个方法的区别在哪里呢?通过分析源码可以知道lock方 ...