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 ...
随机推荐
- NFV实验平台
NFV架构如下图所示. NFVI对应于数据平面,数据平面转发数据并提供用于运行网络服务的资源. MANO对应于控制平面,该控制平面负责构建各种VNF之间的连接以及编排NFVI中的资源. VNF层对应于 ...
- 电商ERP系统——商品SKU与库存设计
面试题经常问道,如何设计库存,哪些库存呢?分类属性的库存:不同颜色 不同尺码的属性的库存,这时候需要针对具体的SKU商品创建表. 总体思路 1.商品关联商品类别,商品类别关联多个商品属性,其中指定某几 ...
- mysql 常用字符串操作
SET @L=16, @i=3;SELECT *,CONCAT( LEFT(tag2,@i-1) ,'W', RIGHT(tag2,@L-@i)) from tb_main LIMIT 1,10;
- Java实现Txt转PDF文件
TxT转PDF可以直接使用IText就可以了,IText在pdf领域可以说暂时是最好的方案了.通过直接读取txt文件,然后生成pdf,再添加文本就可以了. 代码如下: public class Txt ...
- Java_jdbc 基础笔记之八 数据库连接(写一个查询Student对象的方法)
public Student getStudent(String sql, Object... args) { // 查询Student对象 Student stu = null; Connectio ...
- 在本地搭建hyperledger fabric 网络
参考了官方文档,直接就可以了https://hyperledger-fabric.readthedocs.io/en/latest/build_network.html 很好用 ➜ ~ cd $GOP ...
- arcpy实例教程-上游流域下游流域查找
arcpy实例教程-上游流域下游流域查找 商务合作,科技咨询,版权转让:向日葵,135-4855_4328,xiexiaokui#qq.com 功能:对于选定某一流域,查找其直接(一次)的上游流域和下 ...
- boost中g++ 链接undefined reference to `boost::system::generic_category()问题
编译错误如下: g++ -std=c++11 tcp_session.cpp tcp_server.cpp test.cpp -o test -pthread/tmp/ccv4rZkD.o: In ...
- oracle sequnece 介绍以及 监控
###sequnece 介绍 http://www.dba-oracle.com/t_rac_tuning_sequence_order_parameter.htm order by 可能会影响性能, ...
- Nginx 反向代理 一个IP代理多个域名,不区分端口,类似windows虚拟机。
简介: IP有限,所以我们以前使用端口来区分不同的虚拟主机,提供不同的WEB服务. 小范围还凑活,一旦规模扩大,地址记不住了吧?端口记不住了吧? 这个时候我们可以使用DNS,域名解析,毕竟记名字比记I ...