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 ...
随机推荐
- RedisHelper Redis帮助类
using StackExchange.Redis; using System; using System.Collections.Generic; using System.IO; using Sy ...
- 搭建SpringCloud微服务
建立spring父模块 删除不必要的src目录 父模块中的pom.xml中添加相应的依赖以及插件.远程仓库地址 <!-- 项目的打包类型, 即项目的发布形式, 默认为 jar. 对于聚合项目的父 ...
- tomcat关闭异常导致的项目无法重启
有时候 会莫名其妙的,项目启动时候 报tomcat启动异常.重启项目 甚至重启电脑 都没用. 这个时候 ,一般是代码有问题... 这次遇到的问题 就是 引用了外部的jar包,里面有一个自定义异常.但是 ...
- JAVA Asponse.Word Office 操作神器,借助 word 模板生成 word 文档,并转化为 pdf,png 等多种格式的文件
一,由于该 jar 包不是免费的, maven 仓库一般不会有,需要我们去官网下载并安装到本地 maven 仓库 1,用地址 https://www-evget-com/product/564 ...
- vue-cli构建的项目手动添加eslint配置
一.package.json里配置添加 1.scripts里添加快捷eslint检查命令 "lint": "eslint --ext .js,.vue src" ...
- iOS @功能的部分实现思路
需求描述 1. 发布信息时,通过键盘键入@符号,或者点选相关功能键,唤醒@列表,进行选择 2.选择结束后,输入栏改色显示相关内容 3.删除时,整体删除@区块,且不能让光标落在@区块之间 实现步骤 1. ...
- idea右下角显示使用内存情况
效果 设置
- javassist标识符
符号 含义 $0, $1, $2, ... this and 方法的参数 $args 方法参数数组.它的类型为 Object[] $$ 所有实参.例如, m($$) 等价于 m($1,$2,...) ...
- [转帖]比特币本质其实是UTXO
比特币本质其实是UTXO https://www.jianshu.com/p/7071e68c5262 其实并没有什么比特币,我们在交易所里或者钱包里显示的比特币余额其实是UTXO.那到底什么是UTX ...
- c#动态类转json,再由json转xml
直接上代码了,多说无意了. using System; using System.Collections; using System.Collections.Generic; using System ...