vue elementui 在table里使用el-switch

news2024/9/27 12:14:57

        <el-table-column
          prop="operationStatus"
          label="状态"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-switch active-value="ENABLE" inactive-value="DISABLE" v-model="scope.row.operationStatus" @change="handleAdStatusChange(scope.row, scope.$index)"></el-switch>
          </template>
        </el-table-column>

    //理论上底部的js并不重要 只是我记录用法
    // 处理广告状态变化
    handleAdStatusChange(row, idx) {
      this.handleStatusChange(row, idx, adupdatestatus, 'adId', 'adIds');
    },

    handleStatusChange(row, idx, updateFunction, idKey, statusKey) {
      let newStatus = row.operationStatus;
      let oldStatus = row.operationStatus === 'ENABLE' ? 'DISABLE' : 'ENABLE';
      let otxt = idKey == 'adId' ? '广告' : '广告组'
      
      // 复制菜单列表,避免直接修改原始数据
      let oarr = JSON.parse(JSON.stringify(this.menuList));
      
      // 收集要更新的ID
      let oids = [row[idKey]]; // 使用传入的idKey来获取正确的ID
      
      // 构造参数对象
      let params = {
        advertiserId: row.advertiserId,
        [statusKey]: oids, // 使用传入的statusKey来确定使用adgroupIds还是adIds
        operationStatus: newStatus,
      };
      
      // 调用更新函数并处理结果
      updateFunction(params).then((response) => {
        if (response.data.code == 0) {
          this.$message({
            message: '更新'+ otxt +'状态成功',
            type: 'success'
          });
          oarr.records[idx].operationStatus = newStatus;
          this.menuList = oarr;
        }
      }).catch((error) => {
        oarr.records[idx].operationStatus = oldStatus;
        this.menuList = oarr;
        this.$message({
          message: '更新状态失败,请重试',
          type: 'error'
        });
      });
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1949400.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java OpenCV 图像处理40 图形图像 图片裁切ROI

Java OpenCV 图像处理40 图形图像 图片裁切 在 OpenCV 中&#xff0c;Rect 类是用来表示矩形的数据结构&#xff0c;通常用于定义图像处理中的感兴趣区域&#xff08;Region of Interest&#xff0c;ROI&#xff09;&#xff0c;或者指定图像中的某个区域的位置和大小。Rect 类…

【深度学习】大模型GLM-4-9B Chat ,微调与部署(3) TensorRT-LLM、TensorRT量化加速、Triton部署

文章目录 获取TensorRT-LLM代码&#xff1a;构建docker镜像并安装TensorRT-LLM&#xff1a;运行docker镜像&#xff1a;安装依赖魔改下部分package代码&#xff1a;量化&#xff1a;构建图&#xff1a;全局参数插件配置常用配置参数 测试推理是否可以代码推理CLI推理 性能测试小…

Python爬虫技术 第09节 状态码

在使用Python进行网络爬虫开发时&#xff0c;理解HTTP状态码是至关重要的。HTTP状态码是由服务器返回给客户端的响应状态指示&#xff0c;通常用于告知客户端请求是否成功、失败或需要采取进一步的操作。下面是一些常见的HTTP状态码及其含义&#xff1a; 常见的HTTP状态码 1xx…

Lua脚本简单理解

目录 1.安装 2.语法 2.1Lua数据类型 2.2变量 2.3lua循环 2.4流程控制 2.5函数 2.6运算符 2.7关系运算符 3.lua脚本在redis中的使用 3.1lua脚本再redis简单编写 3.2普通锁Lua脚本 3.3可重入锁lua脚本 1.安装 centos安装 安装指令&#xff1a; yum -y update yum i…

5. System Design 5.2. 身份验证框架和信任链

快速链接: . &#x1f449;&#x1f449;&#x1f449; 个人博客笔记导读目录(全部) &#x1f448;&#x1f448;&#x1f448; 付费专栏-付费课程 【购买须知】我的联系方式-自建交流群-学习群 【必看/必看&#xff01;&#xff01;】ATF架构开发精讲-专题目录&#x1f448;…

Unity Android接入SDK 遇到的问题

1. buildtools、platformtools、commandline tools 以及compiled sdk version、buildtools sdk version、target sdk version 的说明 Android targetSdkVersion了解一下 - 简书 2. 查看.class 和.jar文件 jd_gui 官网地址&#xff1a; 下载jd_gui 工具 &#xff0c;或者 idea 下…

全方位数据管理:一站式爬虫服务解决方案

摘要 面对互联网信息爆炸的时代&#xff0c;如何高效地收集、整理并分析海量数据&#xff0c;成为企业与开发者面临的一大挑战。本文将深入探讨一站式爬虫服务解决方案&#xff0c;揭示如何通过全方位数据管理策略&#xff0c;助力企业轻松驾驭大数据海洋&#xff0c;实现数据…

事务和函数索引

事务 事务的定义 事务&#xff08;Transaction&#xff09;&#xff0c;就是将一组SQL语句放在同一批次内去执行&#xff0c;如果一个SQL语句出错&#xff0c;则该批次内 的所有SQL都将被取消执行。 事务的特点 一个事务中如果有一个数据库操作失败&#xff0c;那么整个 事务…

光明乳业:以科技赋能品质,引领乳业绿色新未来

近日&#xff0c;光明乳业再次成为行业焦点&#xff0c;其在科技创新与绿色发展方面的卓越表现赢得了广泛赞誉。作为中国乳制品行业的领军企业&#xff0c;光明乳业始终坚守品质至上的原则&#xff0c;不断探索科技创新之路&#xff0c;致力于为消费者提供更高品质、更健康的乳…

芯片的计算能力由什么决定

芯片的计算能力由什么决定 芯片的计算能力由多个因素决定。 包括但不限于&#xff1a; 架构设计&#xff1a; 芯片的架构设计决定了其计算单元的数量和类型&#xff0c;以及它们之间的连接方式和通信方式。不同的架构可以提供不同的计算能力和性能。处理器速度&#xff1a; 处…

Linux下普通用户无法执行sudo指令

当执行sudo指令时出现&#xff1a; xxx&#xff08;普通用户名字&#xff09; is not in the sudoers file 说明在/etc/sudoers文件中没有把xxx加入到可执行sudo指令的名单中&#xff0c;因此需要修改sudoers文件。 解决方法&#xff1a;1、vim /etc/sudoers &#xff08;要…

【图像标签转换】XML转为TXT图像数据集标签

引言 该脚本用于将包含对象标注的 XML 文件转换为 YOLO&#xff08;You Only Look Once&#xff09;对象检测格式的 TXT 文件。脚本读取 XML 文件&#xff0c;提取对象信息&#xff0c;规范化边界框坐标&#xff0c;并将数据写入相应的 TXT 文件。此外&#xff0c;它还生成一个…

深度学习1-简介

人工智能&#xff08;AI&#xff09;旨在打造模仿智能行为的系统。它覆盖了众多方法&#xff0c;涵盖了基于逻辑、搜索和概率推理的技术。机器学习是 AI 的一个分支&#xff0c;它通过对观测数据进行数学模型拟合来学习决策制定。这个领域近年来迅猛发展&#xff0c;现在几乎&a…

谷粒商城实战笔记-64-商品服务-API-品牌管理-OSS前后联调测试上传

文章目录 1&#xff0c;拷贝文件到前端工程2&#xff0c;局部修改3&#xff0c;在品牌编辑界面使用上传组件4&#xff0c;OSS配置允许跨域5&#xff0c;测试multiUpload.vue完整代码singleUpload.vue完整代码policy.js代码 在Web应用开发中&#xff0c;文件上传是一项非常常见的…

基于PaddleClas的人物年龄分类项目

目录 一、任务概述 二、算法研发 2.1 下载数据集 2.2 数据集预处理 2.3 安装PaddleClas套件 2.4 算法训练 2.5 静态图导出 2.6 静态图推理 三、小结 一、任务概述 最近遇到个需求&#xff0c;需要将图像中的人物区分为成人和小孩&#xff0c;这是一个典型的二分类问题…

设计模式笔记(一)

目录 设计模式共有23种&#xff0c;也可称为GOF23 单例模式&#xff08;重点&#xff0c;常用&#xff09; 工厂模式 代理模式&#xff1a;&#xff08;SpringAOP的底层原理&#xff09; 静态代理模式&#xff1a;&#xff08;写死一个代理类Proxy&#xff09; 动态代理模…

【Java版数据结构】初识泛型

看到这句话的时候证明&#xff1a;此刻你我都在努力 加油陌生人 br />个人主页&#xff1a;Gu Gu Study专栏&#xff1a;Java版数据结构 喜欢的一句话&#xff1a; 常常会回顾努力的自己&#xff0c;所以要为自己的努力留下足迹 喜欢的话可以点个赞谢谢了。 作者&#xff1…

学习笔记:MySQL数据库操作5

1. 触发器&#xff08;Triggers&#xff09; 触发器是数据库的一种高级功能&#xff0c;它允许在执行特定数据库操作&#xff08;如INSERT、UPDATE、DELETE&#xff09;之前或之后自动执行一段代码。 1.1 创建商品和订单表 商品表&#xff08;goods&#xff09; gid: 商品编号…

navicat15安装破解

下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/19RlXTArDfNxT5n98A0GbvQ 提取码&#xff1a;qtew 破解教程 1、运行注册机&#xff0c;勾选Backup、Host和Navicat v15&#xff0c;如图所示。然后点击Patch按钮&#xff0c;找到Navicat Premium 15安装路径下的…

什么是模型无关方法?

「AI秘籍」系列课程&#xff1a; 人工智能应用数学基础人工智能Python基础人工智能基础核心知识人工智能BI核心知识人工智能CV核心知识AI 进阶&#xff1a;企业项目实战 可直接在橱窗里购买&#xff0c;或者到文末领取优惠后购买&#xff1a; 可以与任何模型一起使用的所有强…