vue中將el-switch值true、false改為number類型的1和0
將el-switch值true、false改為number類型的1和0
需求描述
后端傳回的status值為1（number類型）對(duì)應(yīng)el-switch值true（打開）狀態(tài)，status值為0（number類型）對(duì)應(yīng)el-switch值false（關(guān)閉）狀態(tài)。
<el-switch active-value="1" inactive-value="0" v-model="menuInfoForm.status"></el-switch>
說(shuō)明
當(dāng)用如上的【active-value="1" inactive-value="0"】，此時(shí)的【active-value】值類型為string，如果要求【active-value】值類型為number時(shí)，必須在其前面加上:
<el-switch :active-value="1" :inactive-value="0" v-model="menuInfoForm.status"></el-switch>
element ui中el-switch使用的坑
需求說(shuō)明
1、根據(jù)后臺(tái)傳值動(dòng)態(tài)顯示開關(guān)（0為關(guān)，1為開）
2、對(duì)開關(guān)進(jìn)行操作時(shí)請(qǐng)求后臺(tái)，需要傳兩個(gè)參數(shù)：id，type
需求描述
我先說(shuō)我的需求，我想在列表的每一條添加多個(gè)開關(guān)，可以改當(dāng)前一條數(shù)據(jù)的狀態(tài)，并發(fā)送到服務(wù)端，并根據(jù)服務(wù)端返回的結(jié)果局部刷新當(dāng)前頁(yè)數(shù)據(jù)
期望結(jié)果
狀態(tài)是后端返回給我的狀態(tài)，分別是1和2，我先點(diǎn)擊switch發(fā)送給后端這條數(shù)據(jù)的id，然后修改這一條數(shù)據(jù)的狀態(tài)，而不是重新拿這個(gè)列表，如果后端返回失敗的情況這個(gè)switch不做改變
解決方法
Swich默認(rèn)是boolean類型，而后臺(tái)傳值 為number類型，這個(gè)時(shí)候我們想用number來(lái)取代boolean類型；
?<template slot-scope="scope"> ?? ?<el-switch v-model="state" ? ? ? ? active-value="1" ? ? ? ? inactive-value="0" ? ? ? ? active-color="#13ce66" ? ? ? ? inactive-color="#ff4949" ? ? ? ? @change="changeStatus($event,scope.row)" ? ? ??? ?inactive-value="2"> ?? ?</el-switch> </template>
請(qǐng)注意以面的寫法，active-value和inactive-value的值分別是字符串的1和2,如果你賦值為數(shù)字類型的 1 或 2是無(wú)法正常工作的，若賦值為數(shù)值類型，需這樣寫：
?<template slot-scope="scope"> ?? ?<el-switch v-model="state" ?? ? ?active-color="#13ce66" ? ? ? inactive-color="#ff4949" ? ? ?:active-value="1" ? ? ?:inactive-value="0" ? ? ?@change="changeStatus($event,scope.row)")> ?? ?</el-switch> </template>
我們使用綁定的方式，同時(shí)@change可以傳值$event就是switch的當(dāng)條信息值，scope.row為參數(shù)，還可以再添加index表示當(dāng)前列表的序號(hào)
改變狀態(tài)是要注意返回的狀態(tài)根據(jù)狀態(tài)來(lái)選擇相應(yīng)的寫法
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了在vue中寫jsx的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue3如何實(shí)現(xiàn)在style中使用響應(yīng)式變量
vue3已經(jīng)內(nèi)置了這個(gè)功能啦,可以在style中使用v-bind指令綁定script模塊中的響應(yīng)式變量,這篇文章我們來(lái)講講vue是如何實(shí)現(xiàn)在style中使用script模塊中的響應(yīng)式變量,感興趣的朋友一起看看吧2024-07-07
vue3使用localStorage實(shí)現(xiàn)登錄注冊(cè)功能實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3使用localStorage實(shí)現(xiàn)登錄注冊(cè)功能的相關(guān)資料, localStorage這個(gè)特性主要是用來(lái)作為本地存儲(chǔ)來(lái)使用的,解決了cookie存儲(chǔ)空間不足的問(wèn)題,需要的朋友可以參考下2023-06-06
在vue中獲取微信支付code及code被占用問(wèn)題的解決方法
這篇文章主要介紹了在vue中獲取微信支付code及code被占用問(wèn)題的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Vue實(shí)現(xiàn)移動(dòng)端左右滑動(dòng)效果的方法
最近得到一個(gè)新需求，需要在Vue項(xiàng)目的移動(dòng)端頁(yè)面上加上左右滑動(dòng)效果，經(jīng)過(guò)一番折騰，最終決定四月vue-touch。下面小編把實(shí)現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧2018-11-11
這篇文章主要介紹了vue和webpack安裝命令，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
這篇文章主要給大家介紹了關(guān)于Vue緩存方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
自定義指令是用來(lái)操作DOM的。自定義指令就是一種有效的補(bǔ)充和擴(kuò)展，不僅可用于定義任何的DOM操作，并且是可復(fù)用的。這篇文章主要介紹了Vue.js自定義指令的用法與實(shí)例解析，一起看看吧2017-01-01
Vue項(xiàng)目本地沒有問(wèn)題但部署到服務(wù)器上提示錯(cuò)誤(問(wèn)題解決方案)
一個(gè) VUE 的項(xiàng)目在本地部署沒有問(wèn)題，但是部署到服務(wù)器上的時(shí)候提示訪問(wèn)資源的錯(cuò)誤，遇到這樣的問(wèn)題如何解決呢？下面小編給大家?guī)?lái)了Vue項(xiàng)目本地沒有問(wèn)題但部署到服務(wù)器上提示錯(cuò)誤的解決方法，感興趣的朋友一起看看吧2023-05-05
本篇文章主要介紹了vue使用Axios做ajax請(qǐng)求詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06