vue中將el-switch值true、false改為number類型的1和0
將el-switch值true、false改為number類型的1和0
需求描述
后端傳回的status值為1(number類型)對應el-switch值true(打開)狀態(tài),status值為0(number類型)對應el-switch值false(關閉)狀態(tài)。
<el-switch active-value="1" inactive-value="0" v-model="menuInfoForm.status"></el-switch>
說明
當用如上的【active-value="1" inactive-value="0"】,此時的【active-value】值類型為string,如果要求【active-value】值類型為number時,必須在其前面加上:
<el-switch :active-value="1" :inactive-value="0" v-model="menuInfoForm.status"></el-switch>
element ui中el-switch使用的坑
需求說明
1、根據(jù)后臺傳值動態(tài)顯示開關(0為關,1為開)
2、對開關進行操作時請求后臺,需要傳兩個參數(shù):id,type
需求描述
我先說我的需求,我想在列表的每一條添加多個開關,可以改當前一條數(shù)據(jù)的狀態(tài),并發(fā)送到服務端,并根據(jù)服務端返回的結果局部刷新當前頁數(shù)據(jù)
期望結果
狀態(tài)是后端返回給我的狀態(tài),分別是1和2,我先點擊switch發(fā)送給后端這條數(shù)據(jù)的id,然后修改這一條數(shù)據(jù)的狀態(tài),而不是重新拿這個列表,如果后端返回失敗的情況這個switch不做改變
解決方法
Swich默認是boolean類型,而后臺傳值 為number類型,這個時候我們想用number來取代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>
請注意以面的寫法,active-value和inactive-value的值分別是字符串的1和2,如果你賦值為數(shù)字類型的 1 或 2是無法正常工作的,若賦值為數(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>
我們使用綁定的方式,同時@change可以傳值$event就是switch的當條信息值,scope.row為參數(shù),還可以再添加index表示當前列表的序號
改變狀態(tài)是要注意返回的狀態(tài)根據(jù)狀態(tài)來選擇相應的寫法
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue3使用localStorage實現(xiàn)登錄注冊功能實例
這篇文章主要給大家介紹了關于vue3使用localStorage實現(xiàn)登錄注冊功能的相關資料, localStorage這個特性主要是用來作為本地存儲來使用的,解決了cookie存儲空間不足的問題,需要的朋友可以參考下2023-06-06在vue中獲取微信支付code及code被占用問題的解決方法
這篇文章主要介紹了在vue中獲取微信支付code及code被占用問題的解決方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04Vue項目本地沒有問題但部署到服務器上提示錯誤(問題解決方案)
一個 VUE 的項目在本地部署沒有問題,但是部署到服務器上的時候提示訪問資源的錯誤,遇到這樣的問題如何解決呢?下面小編給大家?guī)砹薞ue項目本地沒有問題但部署到服務器上提示錯誤的解決方法,感興趣的朋友一起看看吧2023-05-05