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. RedisHelper Redis帮助类

    using StackExchange.Redis; using System; using System.Collections.Generic; using System.IO; using Sy ...

  2. 搭建SpringCloud微服务

    建立spring父模块 删除不必要的src目录 父模块中的pom.xml中添加相应的依赖以及插件.远程仓库地址 <!-- 项目的打包类型, 即项目的发布形式, 默认为 jar. 对于聚合项目的父 ...

  3. tomcat关闭异常导致的项目无法重启

    有时候 会莫名其妙的,项目启动时候 报tomcat启动异常.重启项目 甚至重启电脑 都没用. 这个时候 ,一般是代码有问题... 这次遇到的问题 就是 引用了外部的jar包,里面有一个自定义异常.但是 ...

  4. JAVA Asponse.Word Office 操作神器,借助 word 模板生成 word 文档,并转化为 pdf,png 等多种格式的文件

    一,由于该 jar 包不是免费的, maven 仓库一般不会有,需要我们去官网下载并安装到本地 maven 仓库 1,用地址   https://www-evget-com/product/564  ...

  5. vue-cli构建的项目手动添加eslint配置

    一.package.json里配置添加 1.scripts里添加快捷eslint检查命令 "lint": "eslint --ext .js,.vue src" ...

  6. iOS @功能的部分实现思路

    需求描述 1. 发布信息时,通过键盘键入@符号,或者点选相关功能键,唤醒@列表,进行选择 2.选择结束后,输入栏改色显示相关内容 3.删除时,整体删除@区块,且不能让光标落在@区块之间 实现步骤 1. ...

  7. idea右下角显示使用内存情况

    效果 设置

  8. javassist标识符

    符号 含义 $0, $1, $2, ... this and 方法的参数 $args 方法参数数组.它的类型为 Object[] $$ 所有实参.例如, m($$) 等价于 m($1,$2,...) ...

  9. [转帖]比特币本质其实是UTXO

    比特币本质其实是UTXO https://www.jianshu.com/p/7071e68c5262 其实并没有什么比特币,我们在交易所里或者钱包里显示的比特币余额其实是UTXO.那到底什么是UTX ...

  10. c#动态类转json,再由json转xml

    直接上代码了,多说无意了. using System; using System.Collections; using System.Collections.Generic; using System ...