vue中將el-switch值true、false改為number類型的1和0

更新時間：2022年10月22日 15:14:31 作者：maidu_xbd

這篇文章主要介紹了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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: