若依 ruoyi vue el-switch 列表开关状态显示有误 全部关闭的问题

news2024/11/25 12:52:44

后台使用int类型传状态status的值

但是前端列表展示的开关状态是未开启,实际上,后台传的都是开启的状态

结果应该是这样

确定后台传的status值 在 el-switch 标签中是否使用了正确的值判断,比如 后台用的是字符串、布尔 或者是 数值类型,以及对应的值是否和 active-value、inactive-value 对应上了。

以下是el-switch 对字符串和数值型数据的不同处理:

1. 字符串传值,属性前无冒号 active-value="0" inactive-value="1"

  <el-table-column label="状态" align="center" prop="status">
    <template slot-scope="scope">
      <dict-tag :options="dict.type.tb_robot_status" :value="scope.row.status"/>
    </template>
  </el-table-column>
  <el-table-column label="状态 string传值" align="center" width="100" prop="status">
    <template slot-scope="scope">
      <el-switch
        v-model="scope.row.status"
        active-value="0"
        inactive-value="1"
        @change="handleStatusChange(scope.row)"
      ></el-switch>
    </template>
  </el-table-column>

如果后台使用的是int值 但是el-switch没有加冒号,则会导致开关状态显示异常:

2. 数值(int等)传值,属性前加冒号 :active-value="0" :inactive-value="1"

  <el-table-column label="状态" align="center" prop="status">
    <template slot-scope="scope">
      <dict-tag :options="dict.type.tb_robot_status" :value="scope.row.status"/>
    </template>
  </el-table-column>
  <el-table-column label="状态 int传值" align="center" width="100" prop="status">
    <template slot-scope="scope">
      <el-switch
        v-model="scope.row.status"
        :active-value="0"
        :inactive-value="1"
        @change="handleStatusChange(scope.row)"
      ></el-switch>
    </template>
  </el-table-column>

el-switch 的其他属性

示例

      <el-table-column label="状态" align="center" width="100" prop="status">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="0"
            :inactive-value="1"
            active-text="开"
            inactive-text="关"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

参考:

https://www.jb51.net/article/265678.htm

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

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

相关文章

android判断文件是否存在跳转不同activity

android studio版本&#xff1a;2021.2.1Patch 2例程名称&#xff1a;ActivityJump完成日期&#xff1a;2023.1.17一直在完善一个小东西&#xff0c;也是不断的在学习。之前做的那个桌面日历天气&#xff08;老旧安卓手机发挥余热做桌面时钟摆件使用&#xff09;&#xff0c;有…

java 数列排序

试题 基础练习 数列排序提交此题 评测记录 资源限制内存限制&#xff1a;512.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s问题描述给定一个长度为n的数列&#xff0c;将这个数列按从小到大的顺序排列。1<n<200输入格式…

【渗透测试】信息搜集总结

前言零零散散的发布过很多文章了&#xff0c;但是也没有完整的总结一下&#xff0c;今天就从信息搜集入手&#xff0c;系统的总结一下。一方面可以巩固自己的基础&#xff0c;作为自己的字典随用随查&#xff0c;另一方面希望对大家的学习和工作起到帮助作用。按照这个过程基本…

求两点间的距离-C语言实现

任务描述 已知两点A(x1,y1),B(x2,y2),求其间的距离。 输入 一行四个浮点数,x1,y1,x2,y2 输出 两点间的距离,要求不要输出多余的零。 本关知识 两点间的距离公式 pow函数 在C语言中,提供了用于求x的y次幂的函数,函数原型为: double pow(double x, double y…

啊啊啊小红书爆款标题技巧被我找到了!

我通过平日里对小红书的了解和积累&#xff0c;再加上这一阵子对小红书爆款笔记的研究&#xff0c;终于在这么多笔记当中发现了小红书爆款笔记标题的撰写规律&#xff01; 我们在撰写小红书的时候恨不得篇篇都是爆文&#xff0c;那么今天就来讲一下小红书那些爆款笔记标题的撰写…

75、DiffRF: Rendering-Guided 3D Radiance Field Diffusion

简介 主页&#xff1a;https://sirwyver.github.io/DiffRF/ 对应用于三维亮度场的概率扩散过程进行去噪。在3D监控和体积渲染的指导下&#xff0c;模型能够无条件地合成高保真3D资产(左)。 蒙面补全的新应用(右)&#xff0c;即从不完整的对象中恢复形状和外观的任务(在右上方…

超实用的百度百科人物词条创建攻略分享,纯干货

自媒体时代&#xff0c;人们越来越有IP意识&#xff0c;打造个人IP就是在为自己创造更多价值。 个人IP的打造是一个提升知名度的过程&#xff0c;怎么才能快速提升&#xff1f;创建一个百度百科词条不失为一个好的选择。 现在用户有问题就会在百度上搜索一下&#xff0c;当用户…

java实现模拟调用接口

本文总结如何用fiddler和postman调试接口&#xff0c;并用java模拟调用接口。fiddler用法当页面点击事件后&#xff0c;在fiddler出现一个请求&#xff0c;单击左侧请求&#xff0c;在右侧的raw的tab标签&#xff0c;出现该请求的详细内容。其实一个请求需要两类参数&#xff0…

Linux常用命令——umask命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) umask 用来设置限制新建文件权限的掩码 补充说明 umask命令用来设置限制新建文件权限的掩码。当新文件被创建时&#xff0c;其最初的权限由文件创建掩码决定。用户每次注册进入系统时&#xff0c;umask命令都被…

大数据技术架构(组件)——Hive:流程剖析1

1.1、流程剖析大致流程&#xff1a;1、客户端连接到HS2(HiveServer2&#xff0c;目前大多数通过beeline形式连接&#xff0c;Hive Cli模式相对较重&#xff0c;且直接略过授权访问元数据),建立会话2、提交sql&#xff0c;通过Driver进行编译、解析、优化逻辑计划&#xff0c;生…

OCR识别

阿里云和百度云识别&#xff0c;京东智能识别。 图片识别需求 1&#xff0c;拿到一个文件&#xff0c;2&#xff0c;变成InputStream 3&#xff0c;base64编码将流解析下载&#xff0c; 4 调用方法识别 1.身份证 2&#xff0c;行驶证 3&#xff0c;驾驶证 FileUtils file…

Elasticsearch:通过例子快速入门

Elasticsearch 是业界最流行的开源企业搜索引擎&#xff0c;应用广泛。 在我们的手机里的 App 背后的搜索引擎好多都是 Elasticsearch&#xff0c;比如我们熟知的抖音&#xff0c;滴滴&#xff0c;美团&#xff0c;携程&#xff0c;点评&#xff0c;银行 app&#xff0c;保险&a…

ssh反向代理实现内网穿透【亲测可用】

常用内网穿透方式 1、网卡层映射&#xff0c;包括购买公网ip 推荐指数&#xff1a;&#x1f44d;&#x1f3fb;&#x1f44d;&#x1f3fb;&#x1f44d;&#x1f3fb;&#x1f44d;&#x1f3fb;&#x1f44d;&#x1f3fb;。 缺点&#xff1a;主要申请困难。 2、自己搭建内网…

JavaWeb-HTTPTomcatServlet

JavaWeb-HTTP&Tomcat&Servlet 1&#xff0c;Web概述 1.1 Web和JavaWeb的概念 Web是全球广域网&#xff0c;也称为万维网(www)&#xff0c;能够通过浏览器访问的网站。 在我们日常的生活中&#xff0c;经常会使用浏览器去访问百度、京东、传智官网等这些网站&#xf…

韩顺平老师的linux基础课(复习笔记)

今天听了韩老师的课程&#xff0c;深受启发啊&#xff01;&#xff01;&#xff01; 卖油翁的“我亦无他&#xff0c;唯手熟尔”&#xff0c;只是手法熟练罢了&#xff01;&#xff01; 还有老黄牛的坚持&#xff0c;别人把时间都放在努力上&#xff0c;而我把时间放在选择上&a…

微信小程序分类菜单激活状态跟随列表滚动自动切换

这里主要用到微信小程序提供的SelectorQuery获取页面节点信息实现&#xff0c;组件用的是微信小程序的scroll-view 逻辑就是获取右侧盒子的节点信息&#xff0c;获取右侧子分类的节点信息&#xff0c;当子分类滑动到顶部的之后&#xff0c;则切换左侧分类状态&#xff0c;而且当…

【java】冒泡排序/选择排序/希尔排序

文章目录排序分类/排序算法的分类冒泡排序代码1&#xff1a;代码2&#xff08;优化代码3&#xff08;算法优化 --当次排序没有进行交换则退出循环代码4&#xff08;封装为方法代码5&#xff08;检测冒泡排序时间复杂度选择排序代码1代码2&#xff08;优化算法代码3&#xff08;…

FinalShell的下载安装简单使用

目录 一、下载 二、安装 三、简单使用 一、下载 下载地址&#xff1a;SSH工具 SSH客户端 1、进去后选择第一个 FinalSheel SSH工具,远程桌面加速软件,支持Windows,macOS,Linux,版本3.9.7,更新时间2022.10.26&#xff1b; 2、选择需要的版本下载&#xff0c;我选择的是&…

80. 循环神经网络的简洁实现

虽然从零开始实现循环神经网络对了解循环神经网络的实现方式具有指导意义&#xff0c;但并不方便。 本节将展示如何使用深度学习框架的高级API提供的函数更有效地实现相同的语言模型。 我们仍然从读取时光机器数据集开始。 import torch from torch import nn from torch.nn i…

【SpringCloud13】SpringCloud Config分布式配置中心

1.概述 1.1 分布式系统面临的配置问题 微服务意味着要将单体应用中的业务拆分成一个个子服务&#xff0c;每个服务的粒度相对较小&#xff0c;因此系统中会出现大量的服务。由于每个服务都需要必要的配置信息才能运行&#xff0c;所以一套集中式的、动态的配置管理设施是必不…