快捷導(dǎo)航

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

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

這篇文章主要介紹了vue中將el-switch值true、false改為number類型的1和0問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

需求描述

后端傳回的status值為1（number類型）對應(yīng)el-switch值true（打開）狀態(tài)，status值為0（number類型）對應(yīng)el-switch值false（關(guān)閉）狀態(tài)。

<el-switch active-value="1" inactive-value="0" v-model="menuInfoForm.status"></el-switch>

說明

當(dāng)用如上的【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)顯示開關(guān)（0為關(guān)，1為開）

2、對開關(guān)進(jìn)行操作時請求后臺，需要傳兩個參數(shù)：id，type

需求描述

我先說我的需求，我想在列表的每一條添加多個開關(guān)，可以改當(dāng)前一條數(shù)據(jù)的狀態(tài)，并發(fā)送到服務(wù)端，并根據(jù)服務(wù)端返回的結(jié)果局部刷新當(dāng)前頁數(shù)據(jù)

期望結(jié)果

狀態(tài)是后端返回給我的狀態(tài)，分別是1和2，我先點(diǎn)擊switch發(fā)送給后端這條數(shù)據(jù)的id，然后修改這一條數(shù)據(jù)的狀態(tài)，而不是重新拿這個列表，如果后端返回失敗的情況這個switch不做改變

解決方法

Swich默認(rèn)是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的當(dāng)條信息值，scope.row為參數(shù)，還可以再添加index表示當(dāng)前列表的序號

改變狀態(tài)是要注意返回的狀態(tài)根據(jù)狀態(tài)來選擇相應(yīng)的寫法

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: