elementui switch 开关,点击确认按钮后在进行开关
- <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 开关,点击确认按钮后在进行开关的更多相关文章
- 在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置
背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: ...
- VS2010 使用时选择代码或双击时出错,点击窗口按钮后VS自动重启问题
VS2010 使用时选择代码或双击时出错崩溃,点击窗口按钮后VS自动重启问题 下载补丁,打上补丁之后,重启电脑,解决了问题. WindowsXP的下载地址:Windows XP 更新程序 (KB971 ...
- layui表格点击排序按钮后,表格绑定事件失效解决方法
最近项目使用layui较为频繁,遇到了一个麻烦的问题,网上搜索也没有看到同类型的问题,故此记下来. 需求是点击上图右侧表格中某一个单元格,会触发点击事件如下代码: $("table>t ...
- php中点击下载按钮后待下载文件被清空
在php中设置了文件下载,下载按钮使用表单的方式来提交 <form method="post" class="form-inline" role=&quo ...
- 作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户
作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...
- asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题
刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...
- win10系统点击关机按钮后无法关机的解决办法
先吐槽下:我越发的发现我现在成了修电脑的了,我的职位是linux运维,现在干的活很蛋疼,公司只有我一个运维,修电脑.搞网络.抬服务器.弄监控,搭环境.搞自动化发布.弄虚拟化都我一个人哇.好了,打住. ...
- js点击修改按钮后修改
<button id="click">改变内容</button> <div id="t">要改变的内容</div> ...
- 今天遇到的点击添加按钮button_click代码段无法执行的问题
首先:本人小白一枚,刚入行,如有表述不当的地方,还请多多指教 网页界面如图: 当点击添加按钮后断点测试进入后台代码运行: 代码会先执行Page_Load页面,当加载完后Page_Load代码会跳转到m ...
随机推荐
- 【软工实践】Alpha冲刺(6/6)
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 tomcat的学习与实现 服务器后端部署,API接口的beta版实现 后端代码 ...
- pg_escape_string专用于转义数据库敏感字符
(PHP 4 >= 4.2.0, PHP 5) pg_escape_string — 转义 text/char 类型的字符串 说明 string pg_escape_string ( strin ...
- (8)Flask微电影项目会员中心其他页面搭建
会员中心修改密码.评论.登录日志和收藏电影4个页面的内容. 一.修改密码页面: {% extends "home/home.html" %} {% block css %} < ...
- 关于H5项目开发中TS(或JS)文件按照顺序编译成一个文件的记录
由于js的执行特性,多个js文件合成一个文件或者进行多个js文件加载时,时需要按照指定的顺序进行的,否则会出现报错的情况. 我们看一下目前几个主流H5引擎的做法. 白鹭的做法 当前版本的做法 在tsc ...
- CEF CefSettings 结构体 详解
1. single_process: 设置为ture时,browser和render使用同一个进程.Chromium 不正是支持此运行模式,并且不如默认的多进程稳定. 2. no_sandbox: 沙 ...
- osg::Node位置移动
osg::Node节点移动的时候,可以使用osg::Matrix::translate 来完成 osg::Matrix::translate中的参数是 当前位置到目标位置需要改变的值,所以,传递参 ...
- GSON工具类
import java.util.Map; import com.google.gson.reflect.TypeToken; import com.google.gson.FieldNamingPo ...
- (转)自动微分(Automatic Differentiation)简介——tensorflow核心原理
现代深度学习系统中(比如MXNet, TensorFlow等)都用到了一种技术——自动微分.在此之前,机器学习社区中很少发挥这个利器,一般都是用Backpropagation进行梯度求解,然后进行SG ...
- java获取当前项目路径System.getProperty("user.dir")
System.getProperty("user.dir") 就是项目的文件夹绝对路径
- java并发-ReentrantLock的lock和lockInterruptibly的区别
ReentrantLock的加锁方法Lock()提供了无条件地轮询获取锁的方式,lockInterruptibly()提供了可中断的锁获取方式.这两个方法的区别在哪里呢?通过分析源码可以知道lock方 ...