vue element-ui el-switch开关获取值问题

已于 2022-04-22 09:17:52 修改
阅读量5.4k 收藏 3
点赞数 3
分类专栏： element-ui 文章标签： vue
于 2020-08-24 15:19:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SmartJunTao/article/details/108097280
版权 
<el-form-item label="开关" prop="delivery">
    <el-switch v-model="ruleForm.delivery" active-color="#13ce66" 
        inactive-color="#ff4949" :active-value="1" :inactive-value="0">
    </el-switch>
</el-form-item>


绑定：
ruleForm:{
    delivery:1
}


表格获取：
<el-table-column prop="delivery" label="开始"></el-table-column>

 

 

船长在船上
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【el-element 001】 el-switch（Switch 开关）高阶用法：1扩展value值，自定义样式，文案；2默认number类型值不生效解决处理
jieweiwujie的博客
09-30 1897
1扩展value值，自定义样式，文案；2默认number类型值不生效解决处理
详解VUE 对element-ui中的ElTableColumn扩展
08-27
在 Vue 项目中，Element-UI 是一个非常流行的前端组件库，其中 ElTableColumn 是一个非常常用的表格列组件。本文将详细介绍如何扩展 ElTableColumn，实现更多的功能和自定义需求。 在实际项目中，我们经常需要对...
解决Element组件el-switch在Vue中值的绑定与回显问题
最新发布
N201871643的博客
05-28 1281
1. 定义与功能el-switch是Element UI提供的一个开关组件，它可以在两种状态之间切换，通常用于表示布尔值的选择。该组件支持自定义样式，可以轻松地集成到各种布局和主题中。2. 常用属性- value：绑定的值，用于控制开关的状态。- disabled：是否禁用开关。- name：开关的名称，用于辅助设备读屏。3. 事件- change：当开关状态改变时触发的事件。
在element中switch无法获取值的问题
A_918的博客
10-18 634
在element中switch无法获取值的问题
el-switch 初始值问题：初始取值不是设定的值
yuxuan89814的专栏
09-16 1613
el-switch is_simple初始值是true，但是进去页面，el-switch是false状态。为什么取不到初始值？ 解决方法 active-value="true" 变成:active-value="true" inactive-value="false"变成:inactive-value="false" <el-switch class="version_switch" v-model="is_simple" .
vue element-ui列表中el-switch 开关
冰冰酱
03-12 4412
一.需求说明 1、根据后台传值动态显示开关（0为关，1为开） 2、对开关进行操作时请求后台，需要传两个参数：ID，State 二.需求描述 在列表的每一条添加一个开关，可以改当前一条数据的状态，并发送到服务端，并根据服务端返回的结果局部刷新当前一条数据 三.期望结果 已读和未读是后端返回给我的状态，分别是1和2，我先点击switch发送给后端这条数据的id，然后修改这一条数据的状态，而不是重新拿这个列表，如果后端返回失败的情况这个switch不做改变 四.解决方法 1.表格中组件
vue3 组件篇 Switch
秋来九月八
10-02 6170
Switch 开关组件经常出现在网页中，比如视频里面的弹幕开关，某一项功能是否开启等。 通常一个switch开关组件需要实现的功能如下 1. 能够流畅的切换开关。 2. 需要能及时反馈开关的状态。 3. 能够出现提示的文字，在开关开启或关闭的时候 4. 最好能够自适应宽度，以便文字的长度能尽可能的满足 5. disabled状态需要实现
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html直接引用vue和element-ui的方法
11-19
3. el-switch：用于创建开关组件。 4. el-time-picker：用于创建时间选择器组件。 5. el-progress：用于创建进度条组件。 6. el-row：用于创建行容器组件。 7. el-steps：用于创建步骤条组件。 使用 Vue 和 ...
在vue3中Element Plus暗黑模式切换
03-06
Element Plus是基于Vue3的组件库，提供了丰富的UI元素和强大的功能，适用于构建企业级应用。在这个项目中，我们将讨论如何在Vue3中使用Element Plus实现暗黑模式的切换。 首先，为了在Vue3应用中引入Element Plus，...
06-Vue全家桶-项目实战（下）4
08-03
为了定制化表格列，例如用户状态列和操作列，我们可以使用作用域插槽来实现，例如在用户状态列中嵌入`el-switch`开关组件，用户可以通过开关切换用户状态。当状态改变时，通过`@change`事件调用`stateChanged`方法，...
element开关赋值（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
12-11 748
<el-table-column prop="value" label="首页科室精选显示" width="180" align="center"> <template slot-scope="scope"> <el-switch v-model="scope.row.value" @change="homeShowChange(scope.row)"> </el-swi
element ui 同时获取select中绑定的value值（id）及label值
smile的博客
03-18 1617
因为不同的业务场景，后台需要传选中的id及name，循环遍历也可以取得label的值，但是这样太麻烦了， 选中后，双向绑定获得的是id的值，想要取得label的值，利用ref属性，来进行实现 this.$nextTick(() => { let str = this.$refs.emsNameLabel.selected.label // 截取-后面的 let index = str.indexOf('-') this.dataForm.shipperCode = str.s
element ui el-switch用数字表示是开关
weixin_40030173的博客
09-03 914
<template> <div> <el-switch v-model="val" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" /> </div> </template> <script> export default{ data(){ return{
Element UI中swich(开关)在表格中的使用
LeeCSDN77的博客
05-20 3653
需求说明 根据后台传值动态显示开关（0为关，1为开） 对开关进行操作时请求后台，需要传两个参数：ID，Status 问题描述 Swich默认是boolean类型，而后台传值 为number类型 Swich的chang方法中只有一个回调参数 解决方法 1.自定义 <el-switch v-model="status" active-value="1" inacti...
element ui中el-switch使用（亲测有效）
热门推荐
loveyou2015的博客
01-26 1万+
需求说明 1、根据后台传值动态显示开关（0为关，1为开） 2、对开关进行操作时请求后台，需要传两个参数：id，goodsRecommend 需求描述 我先说我的需求，我想在列表的每一条添加多个 个开关，可以改当前一条数据的状态，并发送到服务端，并根据服务端返回的结果局部刷新当前页数据 期望结果 状态是后端返回给我的状态，分别是0和1，我先点击switch发送给后端这条数据的id，然后修改这一条数据的状态，而不是重新拿这个列表，如果后端返回失败的情况这个switch不做改变 解决方法 Swich.
vue el-switch 绑定数值时注意问题
PinkCoder
02-26 3524
vue el-switch 绑定数值时注意问题
el-switch接口实现
weixin_58431406的博客
10-21 994
el-switch接口实现
vue-element-admin中文设置
08-08
### 回答1： vue-element-admin是一个基于Vue.js和Element UI的后台管理系统模板。它支持多语言设置，包括中文。要设置中文语言，可以在/src/lang目录下找到zh.js文件，将其复制到/src/lang目录下，并将其命名为index.js。然后在/src/main.js文件中引入index.js文件，并将其添加到VueI18n实例中。最后，在/src/settings.js文件中将language设置为'zh'即可。这样就可以将vue-element-admin设置为中文语言了。 ### 回答2： vue-element-admin是一个基于Vue.js和Element UI的后台管理系统模板，它提供了一套完整的中文设置方案。 首先，在项目中引入Element UI库并使用中文语言包。在main.js文件中，使用import引入Element UI，并使用Vue.use()方法使用Element UI插件。然后，使用按需加载的方式引入中文语言包，如Vue.use(ElementUI, {locale})，其中locale为中文语言包。 接下来，通过配置来设置中文。在项目的src目录下新建settings.js文件，并将以下内容复制到该文件中： ``` module.exports = { title: 'Vue Element Admin', // 项目名称 fixedHeader: false, // 是否固定头部导航栏 sidebarLogo: false // 是否显示侧边栏Logo } ``` 在项目的src目录下找到components目录，在该目录下新建Settings.vue文件，并将以下内容复制到该文件中： ``` <template> <el-switch v-model="settings.fixedHeader" active-color="#13ce66" inactive-color="#ff4949"></el-switch> <el-switch v-model="settings.sidebarLogo" active-color="#13ce66" inactive-color="#ff4949"></el-switch> </template> <script> import settings from '@/settings' export default { name: 'Settings', data() { return { settings: settings } } } </script> ``` 这样，在项目中就可以通过Settings.vue组件来设置相关的中文选项。通过调用settings对象来获取和设置相关设置的值。 最后，在需要显示设置菜单的地方添加以下代码： ``` <el-dropdown item-class="dropdown-item" size="small"> <span class="el-dropdown-link" style="cursor: pointer"> <i class="el-icon-setting"></i> </span> <el-dropdown-menu slot="dropdown"> <settings></settings> </el-dropdown-menu> </el-dropdown> ``` 通过以上设置，就可以在vue-element-admin项目中实现中文设置。 ### 回答3： vue-element-admin 是一种基于 Vue.js 和 Element UI 的后台管理系统解决方案。它具有丰富的功能和灵活的可定制性，使开发者能够快速构建出美观、易用的后台管理界面。 为了将 vue-element-admin 设置为中文界面，您可以按照以下步骤进行操作： 1. 首先，在下载并成功安装了 vue-element-admin 的基础上，在项目的根目录下使用命令行工具进入该项目。 2. 打开 `src/settings.js` 文件，找到 `language` 字段，将其值改为 `'zh-CN'`，即设置语言为中文。 3. 接下来，打开 `src/lang/zh-CN.js` 文件，该文件是用于定义中文语言包的地方，您可以对其进行编辑和自定义。 4. 在 `src/lang/zh-CN.js` 文件中，您可以找到或添加对应的中文翻译，例如 `"dashboard": "仪表盘"`，将英文字段翻译为中文，并保存文件。 5. 最后，重新编译项目，在命令行工具中运行 `npm run build` 命令，待编译成功后，您将得到一个带有中文界面的 vue-element-admin 后台管理系统。 通过以上步骤，您就成功将 vue-element-admin 设置为中文界面。在此基础上，您可以继续根据自己的需求进行界面定制、样式调整等操作。希望对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

船长在船上

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值