vue element-ui列表中el-switch 开关,使用数字0和1

已于 2022-07-08 14:35:52 修改
阅读量1.9k 收藏 3
点赞数 2
分类专栏： web 文章标签： 前端 vue.js javascript
于 2022-07-08 14:34:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25288617/article/details/125677835
版权

el-switch 组件自定义value类型失效

后端传递过来是数字类型，前端el-switch 开关初始化页面回显失效。

官网说支持boolean、string 、Number类型
在这里插入图片描述
解决方案
在这里插入图片描述
在这里插入图片描述

忘记了拥抱
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解VUE 对element-ui中的ElTableColumn扩展
08-27
Vue 中 ElTableColumn 的扩展和应用 在 Vue 项目中，Element-UI 是一个非常流行的前端...这些知识点可以帮助我们更好地理解和使用 Element-UI 中的 ElTableColumn 组件，以及如何扩展和自定义它以满足我们的实际需求。
在vue3中Element Plus暗黑模式切换
03-06
在这个项目中，我们将讨论如何在Vue3中使用Element Plus实现暗黑模式的切换。 首先，为了在Vue3应用中引入Element Plus，你需要在`package.json`文件中添加Element Plus作为依赖。运行以下命令安装： ```bash npm ...
vue element-ui列表中el-switch 开关,使用0和1
热门推荐
qq_35430000的博客
08-19 4万+
需求说明 1、根据后台传值动态显示开关（0为关，1为开） 2、对开关进行操作时请求后台，需要传两个参数：ID，State 需求描述 我先说我的需求，我想在列表的每一条添加一个开关，可以改当前一条数据的状态，并发送到服务端，并根据服务端返回的结果局部刷新当前一条数据 期望结果 已读和未读是后端返回给我的状态，分别是1和2，我先点击switch发送给后端这条数据的id，然后修改这一条数据的状态，而...
element-ui中Switch组件以数字判断开关状态
Yunwushenyanying的博客
12-13 937
element-ui中Switch组件以数字判断开关状态
解决Element组件el-switch在Vue中值的绑定与回显问题
最新发布
N201871643的博客
05-28 1317
1. 定义与功能el-switch是Element UI提供的一个开关组件，它可以在两种状态之间切换，通常用于表示布尔值的选择。该组件支持自定义样式，可以轻松地集成到各种布局和主题中。2. 常用属性- value：绑定的值，用于控制开关的状态。- disabled：是否禁用开关。- name：开关的名称，用于辅助设备读屏。3. 事件- change：当开关状态改变时触发的事件。
Element 中switch绑定值为0和1
越陌度阡
12-19 9197
switch开关经常用在是否启用的场合，但是switch默认绑定值的类型是布尔类型，即true和false，在实际的项目中，后端的接口都会用0和1来代替，如何将数值与状态进行关联呢？ 我们可以用active-value绑定要启用状态的值，用inactive-value绑定禁用状态的值，这两个值默认对应的是字符串类型。 <el-table-column label="是否启用"> <template slot-scope="obj"> <el-sw.
使用el-switch实现开关【自定义0和1】
LZL_68的博客
11-02 1414
【代码】使用el-switch实现开关（自定义0和1）
vue中switch按钮的接口对接，传true(flase)和1(0)的两种方式
weixin_43312391的博客
02-23 3146
1.传true和flase的方式： vue文件中： <template slot-scope="scope"> <el-switch v-model="scope.row.active" active-color="#13ce66" inactive-color="#ff4949" @change="changeStatus($event,scope.row,scope.$in
vue element-ui列表中el-switch 开关
冰冰酱
03-12 4416
一.需求说明 1、根据后台传值动态显示开关（0为关，1为开） 2、对开关进行操作时请求后台，需要传两个参数：ID，State 二.需求描述 在列表的每一条添加一个开关，可以改当前一条数据的状态，并发送到服务端，并根据服务端返回的结果局部刷新当前一条数据 三.期望结果 已读和未读是后端返回给我的状态，分别是1和2，我先点击switch发送给后端这条数据的id，然后修改这一条数据的状态，而不是重新拿这个列表，如果后端返回失败的情况这个switch不做改变 四.解决方法 1.表格中组件
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html直接引用vue和element-ui的方法
11-19
HTML直接引用Vue和Element-UI的方法可以快速地在 HTML 文件中使用 Vue 和 Element-UI 的组件和功能，但是需要了解 Vue 和 Element-UI 的使用规则和限制，并且需要了解如何在 HTML 文件中使用它们。
06-Vue全家桶-项目实战（下）1
08-03
在本节“Vue全家桶-项目实战（下）1”中，主要讲解了如何使用Vue.js框架进行后台管理系统中的用户管理模块的开发。这个模块涵盖了用户信息的展示、增删改查、状态控制以及角色分配等功能。以下是详细的知识点解析： ...
Vue知识分享04-修改时Switch开关回显
m0_64501863的博客
10-09 1887
在javaweb写增删查改的时候，前端会用到vue框架，其中修改操作会用到dialog对话框，在回显的时候，状态使用的是Switch开关，在回显数据的时候发现其他都回显成功了，但是状态一直是关
Vue进阶（幺肆陆）：elementUI 中 el-switch、el-radio 使用注意事项
IT全栈 华强工作室
11-14 6338
需求描述 1、根据后台传值动态显示开关状态及文字说明（0为文字，1为图标） 实施方法 Swich默认是boolean类型，而后台传值 为number类型，这个时候我们需要用number来取代boolean类型； <template slot-scope="scope"> <el-switch v-model="state" on-value="1" off-value="0" on-text="文字" off-text="
vue-elementui switch开关的使用
Tashuo_的博客
09-28 2677
vue-elementui switch开关的使用 话不多说上代码 相关标签释义： active-color：活跃时的颜色 inactive-color：不活跃时的颜色 active-value：活跃时的值 inactive-value：不活跃时的值 @change修改显示状态事件 table中显示状态代码片段 <el-table-column prop="showStatus" header-align="center" align="center" label="显示状态">
单选开关根据后端传值显示开与关
weixin_39218464的博客
05-13 540
html代码 <div class="layui-row margin-bottom-15"> <span class="color-text" style="font-size:22px">2. </span> <span class="color-text" style="font-size:18px">处方单自动审核</span> </div> &l
vue el-switch 绑定数值时注意问题
PinkCoder
02-26 3524
vue el-switch 绑定数值时注意问题
element ui中el-switch根据后端传递值进行默认显示
JiaYou_PPZ的博客
06-04 3949
需求：修改一个行数据，弹出一个修改框，其中状态（启用/禁用）使用switch控制。后端返回的状态，分别是1和0，其中0表示禁用，1表示启用。 问题：当每次点击修改时，不管后端反馈的状态是1还是0，该行数据的状态开关始终处于关闭状态,。...
element-plus中使用el-switch时，用‘0，1’或者0,1来代替true，false绑定
Shivy_的博客
04-30 1005
element-plus中使用el-switch时，用‘0，1’或者0,1来代替true，false绑定
从数据库获取数据，判断状态为可用时才展示在前端页面列表vue
05-25
好的，你可以按照以下步骤进行操作： 1. 在后端编写 API 接口，用于从数据库中获取数据并根据状态判断是否可用。 2. 在前端使用 Vue 发起请求调用后端接口获取数据。 3. 在 Vue 中使用 v-if 或 v-for 指令来判断数据的状态，只有在状态为可用时才展示在页面列表中。 具体实现步骤如下： 1. 后端 API 接口的实现： 以 Node.js 为例，可以使用 Express 框架编写 API 接口。在 Express 中，通过定义路由来处理客户端的请求。在路由处理函数中，可以使用数据库操作库（如 Sequelize）来查询数据库中的数据。查询出来的数据中，根据状态判断哪些数据是可用的，将可用的数据作为响应返回给客户端。 示例代码： ```javascript const express = require('express'); const router = express.Router(); const { Model } = require('sequelize'); router.get('/data', async (req, res) => { try { const data = await Model.findAll(); // 查询数据库中的数据 const availableData = data.filter(item => item.status === 'available'); // 过滤可用的数据 res.json(availableData); // 将可用的数据作为响应返回 } catch (err) { console.error(err); res.status(500).json({ error: 'Server error' }); } }); module.exports = router; ``` 2. 前端调用后端 API 接口： 在 Vue 中，可以使用 Axios 库来发起 HTTP 请求。在组件的 created 或 mounted 钩子函数中，调用 Axios 发起请求获取后端 API 接口返回的数据。 示例代码： ```javascript <template> <div> <ul> <li v-for="item in data" v-if="item.status === 'available'">{{ item.content }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { data: [], }; }, created() { axios.get('/api/data') .then(response => { this.data = response.data; }) .catch(error => { console.error(error); }); }, }; </script> ``` 在上述代码中，使用了 v-for 指令来循环渲染数据，并使用 v-if 指令判断数据的状态是否可用。 希望这些信息对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值