vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決
更新時間：2022年10月22日 15:03:29 作者：Acitylion
這篇文章主要介紹了vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
el-switch 初始值（默認(rèn)值）不能正確顯示狀態(tài)
先去檢查一下接口返回格式 如果是字符串 不需要加冒號
active-value="1" inactive-value="2"
如果是數(shù)字
:active-value="1" :inactive-value="2"
使用el-switch顯示狀態(tài)異常
問題表述
vue項目中的表格使用了el-switch，一開始這個狀態(tài)我使用了布爾值來定義，結(jié)果顯示異常 ，明明有true應(yīng)該顯示綠色開關(guān)的，但全都是紅色(false)狀態(tài)
百度之后找了一種方法能解決這個問題，特此記錄
首頁表格第一次用這個el-switch，此處禁止修改，設(shè)置了disabled,state的值也由布爾值換成了數(shù)字0或者1。這里就顯示正常了
<el-table-column prop="state" label="狀態(tài)" width="120">
<template slot-scope="scope">
<el-switch
disabled
v-model="scope.row.state"
active-value="1"
inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch>
</template>
</el-table-column>第二處用的是彈框中使用的，可以修改的
<el-form-item label="狀態(tài)" props="state" required>
<el-switch
v-model="editForm.state"
active-value="1"
inactive-value="0"
@change="changeState(editForm.state)"></el-switch>
</el-form-item>methods: {
changeState(state) {
this.editForm.state = state;
console.log('嘎嘎地 ',state);
}
}打印結(jié)果
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了key在Vue列表渲染時的原理和作用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
這篇文章主要介紹了vue.js實現(xiàn)的綁定class操作,結(jié)合實例形式分析了vue.js綁定class常見的3種操作技巧,需要的朋友可以參考下2018-07-07
詳解Vue+Element的動態(tài)表單，動態(tài)表格（后端發(fā)送配置，前端動態(tài)生成）
這篇文章主要介紹了Vue+Element動態(tài)表單動態(tài)表格，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實現(xiàn)的雙向數(shù)據(jù)綁定操作示例
這篇文章主要介紹了vue實現(xiàn)的雙向數(shù)據(jù)綁定操作,結(jié)合完整實例形式較為詳細(xì)的分析了vue.js進(jìn)行數(shù)據(jù)雙向綁定操作的常見實現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了教你用Cordova打包Vue項目的方法，詳細(xì)的介紹了如何Vue項目打包成app，具有一定的參考價值，有興趣的可以了解一下2017-10-10
本文通過實例代碼給大家介紹了vue interceptor 使用,需要的朋友可以參考下2018-09-09
Fragment 是 Vue 3 中的新特性,允許一個組件模板返回多個根節(jié)點,與傳統(tǒng)方式不同,不再需要一個額外的 DOM 元素來包裹所有內(nèi)容,本文將詳細(xì)介紹 Fragment 的概念、使用場景、優(yōu)點以及可能遇到的問題,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue組件生命周期運(yùn)行原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時間戳格式）
如果想要獲取選中的日期時間就需要通過,Element Plus 日期選擇器?format屬性和value-format屬性,format指定輸入框的格式,value-format?指定綁定值的格式,本篇文章就給大家介紹Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時間戳格式）,感興趣的朋友一起看看吧2023-10-10
本文通過圖文并茂的形式給大家介紹了Vue組件之自定義事件的功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02